javascript - 更改 <select> 上的值时的 setState

Question

我有两个 <select>输入。我想在另一个 <select> 的特定值选项中将属性设置为“禁用”其中一个.

第一个是:

<select ref="selectOption">
   <option selected value="1" >Option 1</option>
   <option value="2" >Option 2</option>
</select>

<select ref="selectTime" disabled={this.state.disabled}>
   <option value="a" >January</option>
   <option value="b" >Febreaury</option>
</select>

所以，我的想法是设置第 2 个状态 <select>当第一个 <select> 的选项值 = 2 时为 false

我该怎么做？还是有另一种没有反应的方法我可以做到？还是用 Prop ？我很困惑。我尝试做类似的事情:

var option= ReactDom.findDOMNode(this.refs.selectOption).value;
if( option == '2' ) this.setState({disabled:true});

但它不起作用。试图将它放在 componentDidUpdate 中，但是当我从 select 中选择一个新值时组件没有更新，所以这不起作用。请出主意。

编辑:

我也有使用 jquery 的解决方案，但我想使用 Reactjs。

$('#selectOption').change(function() {
    $('#selectTime').prop('disabled', false);
    if ($(this).val() == '2') {
        $('#selectTime').prop('disabled', true);
    }
})

我对如何使用 ReactDom.findDOMNode(this.refs.selectOption) 而不是 jquery 选择器感到很困惑

Answer 1

这是一个如何完成此操作的最小示例，将 onChange 事件处理程序添加到您的第一个选择中，根据值在事件处理程序中添加 setState:

handleChange(event) {
    let value = event.target.value;
    this.setState({
        disabled: value == '2'
    });
}
render() {
    return (
        <div>
            <select ref="selectOption" onChange={(e) => this.handleChange(e)}>
               <option selected value="1" >Option 1</option>
               <option value="2" >Option 2</option>
            </select>

            <select ref="selectTime" disabled={this.state.disabled}>
               <option value="a" >January</option>
               <option value="b" >Febreaury</option>
            </select>
        </div>
    )
}