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

我是React的新手,经过一些教程后,我正在尝试下面的代码.

我创建了一个组件,从商店向它传递道具,在componentWillMount我为组件创建一个新状态.渲染很好,直到现在.

接下来,我state将输入框的值限制在一起,我也有onChange听众.不过,我无法在现场改变我的价值观.

因为,我从角的背景是,我假设结合输入的值陈述象下面会自动更新属性name的state对象.我错了吗？

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

//relevant DOM from component's render function


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初始化时的状态值相同.如何通过输入输入框来改变状态,以便我可以将它们发送到商店.

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

 this.onTodoChange(e.target.value)}
/>

然后在功能中:

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

此外,您可以在Component的构造函数中设置初始状态:

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

如果您只想更改状态变量而不在顶部声明新功能,则可以通过内联函数执行快捷方式

 this.setState({ text: e.target.value })}/>