setState when changing value on a <select>

Question

I have two <select> inputs. I want to set the attribute as "disable" one of them at a specific value option from the other <select>.

The first one is:

<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>

So, my idea is to set the state of the 2nd <select> as false when the option value = 2 from the first <select>

How can I do it? Or is there another way without react that I can do it? or with props? I'm pretty confused. I tried to do something like:

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

But it's not working. Tried to put it in componentDidUpdate but the component is not updating when I select a new value from the select, so that won't work. Ideas please.

EDIT:

I also have this solution with jquery but I want to use Reactjs.

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

I'm pretty confused on how to use ReactDom.findDOMNode(this.refs.selectOption) instead the jquery selectors

Solution 1

Here is a minimal example of how you could accomplish this, add an onChange event handler to your first select, setState in the event handler based on the value:

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

Solution 2

That would be the react way to achieve this:

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

Comments

[pmiranda]

Thanks. This answer and the @rob-m was I was trying to find. I'll pick this answer as correct only because was the first one.

[pmiranda]

Thanks buddy, but React Hooks (2019) wasn't invented yet in 2016, but for people finding a way now and is reading this old question could be helpful