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

Question

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

这是我的JSX代码：

c("B", "C", "F", "G", "H","I")

这是处理输入更改的功能：

<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>

Answer 1

您的代码存在多个问题。

使用onChange，而不是onClick。

由于您要处理的事件是onClick，因此直到第二次单击它才更新。

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

正确更新状态。

在您提供的代码中，您为select标签赋予了此值属性：this.state.value，如果您将setState()与州的相同属性一起使用，这很好。

您正在使用：

this.setState({
  nb: newValue
});

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

this.setState({
  value: newValue
});

setState是异步的。

这意味着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>
        )
    }
}

如果要对其进行测试，可以检查this snippet。