Question

我有一个具有文本输入字段的子组件，该文本输入字段的值应使用父组件（this.props.index）中的props初始化。

这应该是受控输入，因为我希望能够存储输入的文本。

现在，如果我将值设置为状态的属性，则只要重新渲染组件，就永远不会更新，因为永远不会调用setState：

<input type={"text"} placeholder={"Index"} className={"form-control"}
                       value={this.state.index} onChange={this.updateStudentIndex}/>

另一方面，如果我将值设置为道具的属性，则该属性是固定的，无法进行更改：

<input type={"text"} placeholder={"Index"} className={"form-control"}
                       value={this.props.index} onChange={this.updateStudentIndex}/>

如何既可以用this.props.index初始化状态，又可以跟踪输入值this.state.index的变化？

编辑：初始化应在异步模式下完成，即当我单击父组件中的按钮时。

Answer 1

如果您熟悉The Component Lifecycle，请使用componentWillReceiveProps，然后在此处设置新的state

componentWillReceiveProps(nextProps) {
   if(this.props.index !== nextProps.index) {
     this.setState({index: nextProps.index})
   }
}

您可以将值保留在state中，因此在componentWillMount上将state.index设置为props.index

Answer 2

我认为default values在这里可能会有所帮助。

Answer 3

在constructor中，从props读取值并将其设置为state，这样您将获得props.index并保持{{1} }后记。在state事件处理程序中，您可以使用当前值更新onChange。

index

希望这会有所帮助！

Answer 4

找到解决方案，这不应使用受控组件来完成，而应使用uncontrolled components

使用react中的props值初始化输入字段

4 个答案: