React实现点击评论回复按钮显示回复输入框的方法

核心思路是给每个评论单独维护回复框的显示状态，通过父组件（Comment）控制子组件（Reply）的渲染，同时实现组件间的通信。

步骤1：在Comment组件中添加状态管理 #

每个评论需要独立控制回复框的显示/隐藏，所以用对象存储每个评论的状态，以评论ID作为标识：

import { useState } from 'react';
import Reply from './Reply';

const Comment = ({ comments }) => {
  // 初始化所有评论的回复状态为隐藏
  const [replyStates, setReplyStates] = useState({});

  // 切换指定评论的回复框显示状态
  const toggleReply = (commentId) => {
    setReplyStates(prev => ({
      ...prev,
      [commentId]: !prev[commentId]
    }));
  };

  // 处理回复提交逻辑（可根据需求调整）
  const handleSubmitReply = (commentId, replyContent) => {
    // 这里替换成你的实际提交逻辑，比如调用后端API
    console.log(`提交评论${commentId}的回复：${replyContent}`);
    // 提交后自动关闭回复框
    toggleReply(commentId);
  };

  return (
    <div className="comments-container">
      {comments.map(comment => (
        <div key={comment.id} className="comment-item">
          <p>{comment.content}</p>
          {/* 绑定回复按钮的点击事件，传入当前评论ID */}
          <button onClick={() => toggleReply(comment.id)}>回复</button>
          {/* 只有当该评论的回复状态为true时，渲染Reply组件 */}
          {replyStates[comment.id] && (
            <Reply 
              onSubmit={(content) => handleSubmitReply(comment.id, content)}
              onCancel={() => toggleReply(comment.id)}
            />
          )}
        </div>
      ))}
    </div>
  );
};

export default Comment;

步骤2：修改Reply组件，接收父组件的回调 #

让Reply组件通过props获取提交和取消的回调，实现和父组件的交互：

import { useState } from 'react';

const Reply = ({ onSubmit, onCancel }) => {
  const [replyContent, setReplyContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 避免提交空内容
    if (replyContent.trim()) {
      onSubmit(replyContent);
      setReplyContent(''); // 清空输入框
    }
  };

  return (
    <div className="reply-input-container">
      <form onSubmit={handleSubmit}>
        <textarea
          value={replyContent}
          onChange={(e) => setReplyContent(e.target.value)}
          placeholder="写下你的回复..."
          rows="3"
        />
        <div className="reply-buttons">
          <button type="submit">提交</button>
          <button type="button" onClick={onCancel}>取消</button>
        </div>
      </form>
    </div>
  );
};

export default Reply;

关键说明 #

• 每个评论的回复状态独立存储，不会出现点一个回复按钮所有评论都弹出输入框的问题。
• 通过props传递回调函数，让Reply组件可以通知父组件提交内容或者关闭输入框，符合React的单向数据流原则。
• 提交后自动清空输入框并关闭，提升用户体验。

内容的提问来源于stack exchange，提问作者Moumita Dhar