React中输入框状态应存储在父组件还是子组件？

核心结论 #

推荐将newContent状态放在父组件Profile中，和已有的editingPostId状态集中管理，这符合React状态提升的最佳实践逻辑。

为什么放在父组件？ #

1. 状态集中，逻辑清晰：编辑相关的核心状态（正在编辑的帖子ID、编辑中的内容）都在父组件统一维护，避免状态分散导致的同步问题，后续修改或调试时能快速定位所有编辑逻辑。
2. 统一控制生命周期：提交成功或取消编辑时，父组件可以一次性重置editingPostId和newContent，无需子组件额外处理状态同步，减少出错概率。
3. 避免子组件状态冗余：如果把newContent放在子组件，当父组件切换editingPostId（比如用户中途去编辑另一个帖子），子组件的旧编辑内容不会自动清空，需要额外监听editingPostId的变化来重置状态，增加不必要的复杂度。

代码实现示例 #

父组件 Profile.jsx

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

function Profile({ posts }) {
  const [editingPostId, setEditingPostId] = useState(null);
  const [newContent, setNewContent] = useState('');

  // 开启编辑：初始化编辑ID和内容
  const handleStartEdit = (post) => {
    setEditingPostId(post.id);
    setNewContent(post.content);
  };

  // 提交编辑：完成API请求后重置状态
  const handleSubmitEdit = async (postId) => {
    try {
      // 模拟更新帖子的API请求
      await fetch(`/api/posts/${postId}`, {
        method: 'PUT',
        body: JSON.stringify({ content: newContent }),
        headers: { 'Content-Type': 'application/json' },
      });
      // 这里可以更新本地posts列表（根据实际业务逻辑处理）
      // 重置编辑状态
      setEditingPostId(null);
      setNewContent('');
    } catch (err) {
      console.error('帖子更新失败:', err);
    }
  };

  // 取消编辑：直接重置状态
  const handleCancelEdit = () => {
    setEditingPostId(null);
    setNewContent('');
  };

  return (
    <div className="profile">
      {posts.map(post => (
        <Post
          key={post.id}
          post={post}
          isEditing={editingPostId === post.id}
          newContent={newContent}
          onStartEdit={handleStartEdit}
          onUpdateContent={setNewContent}
          onSubmitEdit={handleSubmitEdit}
          onCancelEdit={handleCancelEdit}
        />
      ))}
    </div>
  );
}

子组件 Post.jsx

function Post({ post, isEditing, newContent, onStartEdit, onUpdateContent, onSubmitEdit, onCancelEdit }) {
  if (isEditing) {
    return (
      <div className="post-edit">
        <textarea
          value={newContent}
          onChange={(e) => onUpdateContent(e.target.value)}
          placeholder="编辑你的帖子..."
          rows={4}
        />
        <div className="edit-buttons">
          <button onClick={() => onSubmitEdit(post.id)}>保存</button>
          <button onClick={onCancelEdit}>取消</button>
        </div>
      </div>
    );
  }

  return (
    <div className="post">
      <p className="post-content">{post.content}</p>
      <button onClick={() => onStartEdit(post)}>编辑</button>
    </div>
  );
}

额外优化提示 #

如果后续组件层级变深，props传递过于繁琐，可以用useContext封装编辑相关的状态和函数，避免props drilling，但对于简单的父子组件结构，直接传递props已经足够清晰高效。

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