値を変更するときのsetState <select>

Question

私は2つの<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> 

だから、私の考えは、私はそれを行うことができますどのように最初の<select>

から時にオプションの値は= 2のように虚偽の第二<select>の状態を設定することです？それとも私はそれを行うことができる反応がない別の方法がありますか？または小道具で？私はかなり混乱しています。私は次のようなことを試みました：

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

しかし、それは機能しません。それをcomponentDidUpdateに入れようとしましたが、selectから新しい値を選択したときにコンポーネントが更新されないため、動作しません。アイデアをお願いします。

EDIT：

私も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> 
    ) 
} 

Answer 2

を使用する方法についてはかなり混乱しているどのようにthis約onChangeイベント？あなたの便宜のために：

この達成するために反応する方法だろう

class FlavorForm extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {value: 'coconut'}; 
 

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

 
    handleChange(event) { 
 
    this.setState({value: event.target.value}); 
 
    } 
 

 
    handleSubmit(event) { 
 
    alert('Your favorite flavor is: ' + this.state.value); 
 
    event.preventDefault(); 
 
    } 
 

 
    render() { 
 
    return (
 
     <form onSubmit={this.handleSubmit}> 
 
     <label> 
 
      Pick your favorite La Croix flavor: 
 
      <select value={this.state.value} onChange={this.handleChange}> 
 
      <option value="grapefruit">Grapefruit</option> 
 
      <option value="lime">Lime</option> 
 
      <option value="coconut">Coconut</option> 
 
      <option value="mango">Mango</option> 
 
      </select> 
 
     </label> 
 
     <input type="submit" value="Submit" /> 
 
     </form> 
 
    ); 
 
    } 
 
}

Answer 3

：ここ

export default class Test extends Component{ 

    constructor(props) { 
    super(props) 

    this.state = { 
     selectOptionValue: '1' 
    } 
    } 

    handleOnChange = (e) => { 
    this.setState({ 
     selectOptionValue: e.target.value 
    }) 
    } 

    render(){ 
    return (
     <div> 
     <select defaultValue = "1" onChange={this.handleOnChange}> 
      <option value="1" >Option 1</option> 
      <option value="2" >Option 2</option> 
     </select> 

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

Answer 4

単純なままにして、純粋なjavascriptを使用したい場合は、次のスニペットを使用できます。

document.querySelector('select[ref="selectOption"]').addEventListener('change', function(e) { 
 
    document.querySelector('select[ref="selectTime"]').disabled = (e.target.value === '2') ? true : false; 
 
})

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

 
<select ref="selectTime"> 
 
    <option value="a">January</option> 
 
    <option value="b">Febreaury</option> 
 
</select>