Как получить значение из раскрывающегося списка материалов в реакции

Question

Я пытаюсь получить значение из выпадающего списка через действие onChange, но функция не вызывает в реакции.

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>

Я пытался получить значение из выпадающего списка. Функция не была вызвана. Я не нашел, в чем проблема в моем коде.

Answer 1

Использование делегированного события решает проблему для меня.

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

Эта ссылка была исправлена ​​моя проблема. Пожалуйста, обратитесь к следующей ссылке https://github.com/facebook/react/issues/3667

Answer 2

Вы можете добавить прослушиватель событий при изменении события, используя jquery

$('select')
  .material_select()
  .change(this.handleInputChange);
  // assuming you have binded `handleInputChange` in constructor
  // if not you need to add `this.handleInputChange = this.handleInputChange.bind(this)`
  // line of code to constructor or make `handleInputChange` to be an arrow function

Также вам не нужно напрямую мутировать state в setState функция. Вам необходимо вернуть объект, который будет объединен с государством.

handleInputChange(event) {
  alert("testing")
  this.setState((state) => {
    return {
      registerForm: {
        ...state.registerForm,
        [event.target.name]: event.target.value
      }
    }
  });
}