How to get the value from the material select dropdown in react

Question

I am trying to get the value from the select drop down through onChange action but the function was not calling in react.

handleInputChange(event) {
  alert("testing")
  event.persist();
  this.setState((state) => {
    state.registerForm[event.target.name] = event.target.value
  });
}
componentWillMount() {
  console.log("executed")
  $(document).ready(function() {
    $('.dropdown-button').dropdown({
      constrainWidth: false,
      hover: true,
      belowOrigin: true,
      alignment: 'left'
    });
    $('select').material_select();
    $('.dropdown-button').dropdown({
      constrainWidth: false,
      hover: true,
      belowOrigin: true,
      alignment: 'left'
    });
    $('.button-collapse').sideNav();

  });
}

<div className="col-md-6 pl-0">
  <select id="countryCode" name="countryCode" onChange={this.handleInputChange}>
    <option value="Code" disabled selected required>Code</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </select>
  <div className="errorField mt-18">{this.state.registerFormError.countryCode}</div>
</div>

I have tried to get the value from the select dropdown.the function was not called.I did not find what is the problem in my code.

Answer 1

Using delegated event fixes the problem for me.

$('#pickerContainer').on('change', 'select', function(){ console.log("got you"); });

This link was fixed my problem.please refer to the following link https://github.com/facebook/react/issues/3667