องค์ประกอบการเลือกที่ควบคุมการตอบสนองจะเปลี่ยนกลับเป็นตัวเลือกแรก

ฉันใช้ React เพื่อสร้างองค์ประกอบการเลือกแบบควบคุม แอพของฉันตรวจสอบค่าตัวเลือกใหม่ที่ผู้ใช้เลือก จากนั้นอัปเดตค่านั้นในองค์ประกอบ การตรวจสอบความถูกต้องต้องใช้เวลาพอสมควรและพฤติกรรมที่ฉันสังเกตเห็นมีดังนี้:

• ผู้ใช้เลือกตัวเลือก
• องค์ประกอบเปลี่ยนตัวเลือกที่เลือกเป็นดัชนี 0
• เมื่อสิ้นสุดระยะเวลาการตรวจสอบ องค์ประกอบจะอัปเดตตัวเองเป็นค่าใหม่

ฉันไม่เข้าใจว่าทำไมองค์ประกอบจึงเปลี่ยนกลับเป็นดัชนีแรก และฉันจะป้องกันสิ่งนี้ได้อย่างไร (ยกเว้นโดยการตั้งค่าทันทีซึ่งเป็นสิ่งที่ไม่ต้องการในแอปพลิเคชันของฉัน)

ใช้ JSFiddle นี้เพื่อดูพฤติกรรมนี้ (เลือกตัวเลือก 2) https://jsfiddle.net/qo39g2j4/

var Select = React.createClass({
  render: function() {
    return (
        <select id="my-select" value={this.props.value} onChange={this.props.onChange}>
            <option value="Option1">Option1</option>
            <option value="Option2">Option2</option>
            <option value="Option3">Option3</option>
        </select>
    );
  }
});

var Wrapper = React.createClass({
    getInitialState: function () {
        return {value: "Option3"};
    },
    onChange: function (event) {
        var value = event.target.value;
        setTimeout(function () {
            this.setState({value: value});
        }.bind(this), 1000); // this simulates the validation period
    },
    render: function () {
        return (
            <Select
                value={this.state.value}
                onChange={this.onChange}/>
        );
    }
});

ReactDOM.render(
    <Wrapper/>,
    document.getElementById("container")
);