javascript - 在 react 中选择选项

Question

class Select extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      values: "testing"
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    this.setState({values: event.target.value});
    this.props.onSelect(this.state.values);
    console.log("valus is " +this.state.values + " event is " + event.target.value);
  }

  render() {
    return (
       <select value={this.state.values} onChange={this.handleChange}>
          <option value="">
            Select one...
          </option>
          {this.props.question.map(obj => (
            <option key={obj.id} value={obj.percentage}>
                {obj.question}
            </option>
          ))}
      </select>
    );
  }
}

现在我正在创建一个选择菜单，默认选择值为空。这里有一个选项(选择一个=“”，问题1=“1”，Question2=2) 我不知道为什么我选择 Question1，它控制台了值是上一个“测试”，但 event.target.value 是正确的。有人可以帮我吗？谢谢您

Answer 1

您注意到的行为是由于 setState() 方法 being asynchronous 。要将更新后的状态记录到控制台，请考虑通过 setState() 的回调来执行此操作，该回调在状态更改应用于组件时调用:

handleChange(event){

    this.setState({values: event.target.value}, () => {
        console.log("valus is " + this.state.values + 
                    " event is " + event.target.value);
    });

    this.props.onSelect(this.state.values);
}