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

我在React中选择了一个，只想选择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>

---

您的代码存在多个问题

使用onChange，而不是onClick。 由于您正在处理的事件是一个

onClick

，因此它在第二次单击之前不会更新

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

这将更新

state.nb

，而不是

state.value

。使用：

this.setState({
  value: newValue
});

setState是异步的。 这意味着React将决定何时是更新状态的最佳时机，这可能会晚于您希望使用

console.log（）

的时间

即使使用

onChange

事件，也可能无法读取下一行代码中的状态，如下所示：

this.setState({
  value: event.target.value
})
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>
        )
    }
}

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

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

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

this.setState({
  value: event.target.value
})
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>
        )
    }
}

类示例扩展了React.Component{
状态={
值：“0”
}
handleNumber=（事件）=>{
这是我的国家({
值：event.target.value
}, () => {
console.log（this.state.value）
})
}
render（）{
返回(
选择数字

1.
2.
3.
4.
)
}
}

---

如果您想测试它，您可以检查。

您想在更改后何时控制台该值？而且您在select标记中设置了错误的值。这里应该是this.state.nb@droledenomCheck：setState是异步的，可能是在您使用

console.log（）时，它还没有被更新。尝试使用
this.setState（{yourNewState}，（）=>{console.log（this.state）}）