javascript - 物化选择元素上没有 "onChange"事件

Question

我有这个表单组件:

import React, { Component } from 'react'

export default class FooForm extends Component {
  updateFooSelection() {
    console.log('Something should be printed... but I see nothing :(');
  }

  componentDidMount() {
    this.initialiseWidgets();
  }

  componentDidUpdate() {
    this.initialiseWidgets();
  }

  initialiseWidgets() {
    Materialize.updateTextFields();
    $(this.refs.selectFoo).material_select();
  }

  componentWillUnmount() {
     $(this.refs.selectFoo).material_select('destroy');
  }

  render() {
    return (
      <form>
        <select id="selFoo" ref="selectFoo" onChange={ this.updateFooSelection }>
          <option value="foo">Foo</option>
          <option value="bar">Bar</option>
        </select>
      </form>
    );
  }
};

但是，updateFooSelection 函数根本从未被触发。检查 DOM 时，似乎没有任何 onchange 属性或类似的东西。我试着理解 docs ，但是没有此类元素的示例。

如何在 React 中使用 Materialize 获取选择元素的更改事件？

为什么 onChange 事件从未在此元素上触发？

Answer 1

This issue解释原因。

基本上，ònChange 属性根本不起作用，需要使用 .on('change', ... 代替。

initialiseWidgets() {
  Materialize.updateTextFields();
  $(this.refs.selectFoo).on('change', function () {
     console.log('yay!');
  }).material_select();
}