在JS中选择返回先前选定值的值

Question

我在反应中有一个选择，只是想console.log选择的值。我的问题是console.log返回最后选择的值。例如，如果我选择4，然后是3，然后是5，代码将呈现1（默认值），然后是4，然后是3。

这是我的JSX代码：

<p>choose Number</p>                                     
<select value={this.state.value} onClick={this.handleNumber}>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
</select>

这是处理输入更改的函数：

handleNumber = (event) => {
  this.setState({
     nb: event.target.value
  })
  var number = this.state.nb;
  console.log(number);
}

Answer 1

您的代码存在多个问题。

由于您正在处理的事件是一个onClark，它将永远不会更新，直到第二次单击。

<select value={this.state.value} onChange={this.handleNumber}>

在您提供的代码中，您将为选择标记提供这个值属性：this.state.value，如果您使用具有相同状态属性的setState（），这是可以的。

您正在使用：

this.setState({
  nb: newValue
});

这将更新state.nb，而不是state.value。使用：

this.setState({
  value: newValue
});

这意味着React将决定何时是更新状态的最佳时机，这可能会晚于您希望使用console.log（）的时间。

即使您使用onChange事件，您也可能无法读取下一行代码中的状态：

this.setState({
  value: event.target.value
})
console.log(this.state.value)

状态更改后立即执行操作的最佳方法是setState回调函数：

this.setState({
  value: event.target.value
},function(){
  console.log(this.state.value)
})

最后，您的组件及其相应的更正应该如下所示：

class Example extends React.Component {
    state = {
        value: "0"
    }
    handleNumber = (event) => {
        this.setState({
            value: event.target.value
        }, () => {
            console.log(this.state.value)
        })
    }
    render() {
        return (
       <div>
        <p>choose Number</p>                                     
        <select value={this.state.value} onChange={this.handleNumber}>
          <option value="one">1</option>
          <option value="two">2</option>
          <option value="three">3</option>
          <option value="four">4</option>
        </select>
      </div>
        )
    }
}

如果你想测试它，你可以检查这个片段。