Question

我刚开始使用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}分配输入值，那么更改状态将触发子文件的重新渲染，文件名为默认值，用户将能够编辑它

Answer 1

尝试将onChange on Search委托给道具，这样你的父母就可以在为孩子调用onChange时设置值。

onChange={this.props.onInputChange}

Answer 2

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

我想你真正想要做的是改变父组件内部的状态。

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

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

然后通过道具

将其传递给子组件

<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>

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

2 个答案: