javascript - 当前值未反射(reflect)在 reactjs 选择组件中

Question

我在 React 中创建了一个自定义 Select。每当我尝试从选项中选择一个值时，它仅反射(reflect)旧值，例如我从下拉列表中选择 4 handleChange 函数将从 e.target.value 中获取值 1，但下拉框将显示更改后的值“4”。

module.exports = React.createClass({
    getInitialState:function(){
        return {selectValue:'1'};
    },
    handleChange:function(e){
        this.setState({selectValue:e.target.value});
        this.props.callbackParent(this.state.selectValue);
    },
    render: function() {
        return (
        <div>
         <select value={this.state.selectValue}
            onChange={this.handleChange} >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          </select>
        </div>
        );
    }
});

Answer 1

您正在尝试从 state(this.state) 获取值(selectValue) 而它尚未完成，在这种情况下您可以使用回调作为第二个参数setState , 像这样

handleChange: function(e) {
  this.setState({selectValue:e.target.value}, function () {
    this.props.callbackParent(this.state.selectValue);
  });
}

Example

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.