嘿，我之前做类似的笔记应用时也踩过这个坑！核心问题在于React的props是只读的，你没办法直接在子组件里修改传入的props内容。咱们一步步来实现编辑和保存的功能：

核心思路拆解 #

1. 状态管理：把可编辑内容的状态放在合适位置 #

因为最终要让更新后的内容同步回App组件（毕竟App是数据的源头），建议把笔记的内容状态放在App组件中，NoteEntry只负责接收数据和触发更新动作。如果只是组件内临时编辑，也可以在NoteEntry里维护一个本地状态拷贝props的值，但最终保存还是要同步回父组件。

2. 切换编辑/查看模式 #

在NoteEntry组件里加一个布尔状态（比如isEditing），用来控制显示普通文本还是编辑输入框：

• 点击“编辑”按钮时，把isEditing设为true，显示输入框
• 点击“保存”按钮时，把isEditing设为false，回到文本显示模式

3. 子父组件的双向数据传递 #

NoteEntry需要通过回调函数把更新后的内容传给App组件，App再更新自己的state，这样props会自动更新，NoteEntry就能拿到最新的内容了。

具体代码实现示例 #

App组件部分（补全后的核心代码） #

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notes: [
        { id: 1, content: "这是第一条笔记" },
        { id: 2, content: "这是第二条笔记" }
      ]
    };
    // 绑定回调函数的this指向
    this.updateNote = this.updateNote.bind(this);
  }

  updateNote(noteId, newContent) {
    this.setState(prevState => ({
      notes: prevState.notes.map(note => 
        note.id === noteId ? { ...note, content: newContent } : note
      )
    }));
  }

  render() {
    return (
      <div className="App">
        {this.state.notes.map(note => (
          <NoteEntry 
            key={note.id} 
            note={note} 
            onUpdateNote={this.updateNote} 
          />
        ))}
      </div>
    );
  }
}

NoteEntry组件部分 #

class NoteEntry extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false,
      // 用props传入的内容初始化本地编辑状态
      editContent: this.props.note.content
    };
    this.handleEditChange = this.handleEditChange.bind(this);
    this.handleSave = this.handleSave.bind(this);
    this.toggleEdit = this.toggleEdit.bind(this);
  }

  // 监听输入框变化，实时更新本地状态
  handleEditChange(e) {
    this.setState({ editContent: e.target.value });
  }

  // 保存时调用父组件的回调，传递更新后的内容
  handleSave() {
    this.props.onUpdateNote(this.props.note.id, this.state.editContent);
    this.setState({ isEditing: false });
  }

  // 切换编辑/查看模式
  toggleEdit() {
    this.setState(prevState => ({ isEditing: !prevState.isEditing }));
  }

  // 当props更新时（比如其他地方修改了笔记），同步本地编辑状态
  componentDidUpdate(prevProps) {
    if (prevProps.note.content !== this.props.note.content) {
      this.setState({ editContent: this.props.note.content });
    }
  }

  render() {
    const { note } = this.props;
    const { isEditing, editContent } = this.state;

    return (
      <div className="note-entry">
        {isEditing ? (
          <div>
            <textarea 
              value={editContent} 
              onChange={this.handleEditChange}
              autoFocus
            />
            <button onClick={this.handleSave}>保存</button>
            <button onClick={this.toggleEdit}>取消</button>
          </div>
        ) : (
          <div>
            <p>{note.content}</p>
            <button onClick={this.toggleEdit}>编辑</button>
          </div>
        )}
      </div>
    );
  }
}

关键细节说明 #

• 为什么用本地状态editContent？：因为props是只读的，不能直接在输入框里绑定note.content，所以需要拷贝一份到本地状态用于编辑。
• componentDidUpdate的作用：如果App里的笔记内容被其他方式修改（比如批量编辑），NoteEntry的本地状态需要同步最新的props值，避免显示不一致。
• 回调函数onUpdateNote：子组件不能直接修改父组件的state，所以通过回调让父组件自己更新状态，这是React中父子组件通信的标准方式。

这样实现后，点击编辑按钮就能调出输入框修改内容，点击保存后App的state会更新，NoteEntry也会显示最新的笔记内容啦！

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