如何从父组件更新子组件的状态

How to update the state of child component from parent?

本文关键字：组件 状态 更新      更新时间：2023-09-26

我刚刚开始使用 React，无法弄清楚这一点。

    <Select>
      <Search term={this.state.filename} />
    </Select>
选择组件

用于选择文件，我想将搜索组件内输入文本的初始值设置为文件名。

这是搜索组件

  <form onSubmit={this.handleSubmit}>
    <input
      type="search"
      value={this.props.term}
      onChange={this.handleChange}
    />
  </form>

现在，每当用户尝试从父级设置的初始值更改输入值时，我都会使用新的输入值设置子项的状态，但这会触发子项的重新渲染，从而重置输入值。解决这个问题的正确方法是什么？

我目前的想法是，如果我像这样分配输入的值value={this.props.term} ，那么更改状态将触发以文件名作为默认值的子项的重新渲染，用户将能够对其进行编辑。

尝试将搜索上的 onChange 委托给 props，以便您的父级将成为在子项上调用 onChange 时设置值的人。 

onChange={this.props.onInputChange}

这里您使用的是 value={this.props.term} ，它使输入成为受控组件。这里的值将始终与 this.props.term 相同，这是父组件的状态。 <Search term={this.state.filename} />

我想你在这里真正想做的是改变子组件中父级的状态。

然后，您应该将函数从父组件传递到子组件。该函数将更改父组件的状态。您应该在父组件中定义 Something，如下所示：

onChildInputChange(term) {
    this.setState({term: term })
}

然后通过 props 将其传递给子组件

<Select>
   <Search term={this.state.filename} onChildInputChange={this.onChildInputChange} />
</Select>

这样在子组件中你可以这样做： 

 <form onSubmit={this.handleSubmit}>
    <input
      type="search"
      value={this.props.term}
      onChange={()=>{this.props.onChildInputChange()}}
    />
  </form>
相关文章：