Question

我有以下代码，可在更改文本框值时保留该值。但是，在调试valueHasChangedEvent时，下面显示的变量x行奇怪地保留了先前的值。我做错了什么吗？显示的示例是当我在文本框中输入“ test123”时。

谢谢

onChange事件

<Input onChange={this.valueHasChangedEvent}
   type="text" 
   name="test" 
   id="test" />

方法

valueHasChangedEvent = (event) => {
    var self = this;
    const { name, value } = event.target;
    self.setState({test: value});  // value = 'test123'

    var x = self.state.test;  // x = 'test12'
}

Answer 1

状态需要一些时间来更改，并且由于您在状态突变之前正在读取状态值，因此您将获得先前的值作为输出。因此，您需要将其写入setState函数的回调中，或在shouldComponentUpdate（）中读取它

var x;
self.setState({test: value}, (x) => {
  x = self.state.test
});

设置状态然后读取状态显示先前的值

1 个答案: