javascript - 为什么即使使用 onChange 监听器也无法更改 React 中的输入值

Question

我对 React 还很陌生，在学习了一些教程之后，我尝试了下面的代码。

我制作了一个组件，从商店将 Prop 传递给它，在 componentWillMount 上我为组件创建了一个新状态。到目前为止，渲染效果很好。

接下来，我将我的 state 绑定(bind)到输入框的值，并且我还有 onChange 监听器。尽管如此，我无法改变我在这个领域的值(value)观。

由于我来自 Angular 背景，我假设将输入的值绑定(bind)到如下所示的状态将自动更新 state 对象中的属性 name 。我这里错了吗？

componentWillMount(){
    this.setState({
        updatable : false,
        name : this.props.name,
        status : this.props.status
    });
}

//relevant DOM from component's render function
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/>

onTodoChange(){
    console.log(this);
    //consoling 'this' here, shows old values only.
    //not sure how and even if I need to update state here.
    // Do I need to pass new state to this function from DOM
    //TODO: send new data to store
}

我的 onTodoChange 函数控制台 this 的值，该值与初始化时的状态值相同。如何通过在输入框中键入内容来更改状态，以便将它们发送到商店？

Answer 1

与 Angular 不同，在 React.js 中您需要手动更新状态。你可以这样做:

<input
    id={'todoName' + this.props.id}
    className="form-control"
    type="text"
    value={this.state.name}
    onChange={e => this.onTodoChange(e.target.value)}
/>

然后在函数中:

onTodoChange(value){
        this.setState({
             name: value
        });
    }

此外，您还可以在组件的构造函数中设置初始状态:

  constructor (props) {
    super(props);
    this.state = {
        updatable: false,
        name: props.name,
        status: props.status
    };
  }