React中如何更新预填充input输入框的内容为用户新输入的值

问题根因 #

你直接将input的value绑定到props.searchResults这类父组件传递的只读属性时，用户输入不会触发props更新，所以输入框内容不会变化，导致无法编辑。而使用defaultValue属于非受控组件写法，输入状态不在你维护的本地state中，自然无法主动获取最新的输入值。

具体实现步骤 #

• 打开编辑弹窗时，将目标待办的初始数据同步到模态框组件的本地state
  你可以在点击编辑按钮触发弹窗的逻辑里完成数据同步：

// 点击编辑按钮的触发函数
handleOpenEditModal = (targetTodo) => {
  this.setState({
    isEditModalOpen: true,
    // 字段名要和对应input的name属性保持一致
    todoName: targetTodo.todoName,
    todoDesc: targetTodo.todoDesc,
    todoDeadline: targetTodo.todoDeadline,
    // 保存待办id供后续更新接口调用
    todoId: targetTodo.id
  })
}

• input的value绑定本地state，继续复用你原有handleChange逻辑即可

// 模态框内的输入框写法示例
<input
  name="todoName"
  value={this.state.todoName}
  onChange={this.handleChange}
/>
<textarea
  name="todoDesc"
  value={this.state.todoDesc}
  onChange={this.handleChange}
/>

• 提交编辑请求时，直接从本地state中读取最新的字段值调用更新接口即可

注意事项 #

如果模态框是多个编辑场景复用的，每次触发不同待办的编辑操作时，都会用目标待办的初始值覆盖本地state，不会出现编辑内容串扰的问题。

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