如何在 React 中使用新值更新预填充的输入字段答案

【问题标题】：How to update a pre-filled input field with a new value in React如何在 React 中使用新值更新预填充的输入字段
【发布时间】：2021-08-31 18:40:43
【问题描述】：

我有一个待办事项应用程序，如果您点击搜索，API 将从数据库返回待办事项，并将它们显示在 UI 的表格中。每个待办事项也会显示一个“编辑”按钮。当您单击该编辑按钮时，会弹出一个模式，其中包含预先填充了来自数据库的信息的输入字段，如下所示

I can't embed pictures yet so you'll have to click here to see it

在这种情况下，我似乎无法弄清楚如何处理输入字段中的更改。我知道如何处理“创建待办事项”页面上的输入字段更改，因为我将每个输入字段的状态设置为一个空字符串，然后由一个句柄更改函数覆盖，例如：

    this.setState({
      [event.target.name]: event.target.value,
    });
  }

这显然适用于创建待办事项，因为每个输入字段值都是一个空字符串，直到我在输入字段中输入内容。

但是，对于预填充的输入字段，我不知道将值设置为什么。如果我将其设置为 props.searchResults.todoName （仅作为示例），我无法更改输入字段中的内容。 UI 不允许我删除或输入任何内容。因此，相反，我将每个输入字段的搜索结果值设置为“defaultValue”，以便它至少预先填充该字段，并且我仍然可以输入新内容。我只是不知道如何保存/更新它对我输入的任何内容都具有价值。请帮助新手！

【问题讨论】：

标签： reactjs input

【解决方案1】：

在您的表单上，您只需添加默认值：defaultValue={this.state.todoName} 并确保 name={this.state.todoName} 与状态值匹配。这将使用您现有的值预先填充您的输入，并且只要输入发生更改，它就会相应地更新它。

【讨论】：

因此默认值当前设置为props.seachResult.todoName，因为这是从数据库发回的值。它可以很好地预先填充信息，我只是不知道如何更新它，哈哈。至于名称部分，我不确定我是否遵循您的思路。我还不需要 onChange 处理程序吗？
这意味着您正在处理来自子组件的输入。在这种情况下，onChange 函数必须作为 prop 传递给子组件，因此每次更新输入时，onChange 函数都会更新父组件中的值。也许更新问题并包含更多相关代码，例如父组件以及子组件，这将很有用。