Question

我试图通过onChange操作从select下拉列表中获取值，但该函数未调用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>

我试图从选择下拉列表中获取值。未调用该函数。我的代码未发现问题所在。

Answer 1

您可以使用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
      }
    }
  });
}

Answer 2

使用委托事件为我解决了这个问题。

$（'＃pickerContainer'）。on（'change'，'select'，function（）{console.log（“ got you”）;}）;

此链接已解决我的问题。请参考以下链接https://github.com/facebook/react/issues/3667

如何从反应中的材料选择下拉列表中获取值

2 个答案: