setState при изменении значения на <select>

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> как ложные, когда значение параметра = 2 из первого <select>

Как я могу это сделать ? Или есть другой способ, не отреагировав, что я могу это сделать? или с реквизитом? Я довольно смущен. Я попытался сделать что-то вроде:

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

Но это не работает. Попробовал поместить его в componentDidUpdate, но компонент не обновляется, когда я выбираю новое значение из выбранного, так что это не сработает. Идеи, пожалуйста.

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

Как насчет onChange событий от this? Для вашего удобства:

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>