Question

我创建了一个自定义Select in react。每当我尝试从选项中选择一个值时它只反映旧值，例如我从下拉菜单中选择4，更改函数将从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

你正在尝试从状态（selectValue）获取值（this.state）而它没有完成，在这种情况下你可以使用回调作为setState中的第二个参数，就像这样

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

Example

第二个（可选）参数是一个回调函数完成setState后执行并重新呈现组件。

Answer 2

除了props.callbackParent：

的类型错误外，这个工作正常

https://jsfiddle.net/reactjs/69z2wepo/

HTML：

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JS：

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

当前值不反映在reactjs中选择组件

2 个答案: