在物化选择元素上没有"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属性或类似的东西.我试过理解文档,但是这个元素没有例子.

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

为什么onChange事件永远不会在这个元素上被触发？

Answer 1

这个问题解释了原因.

基本上,ònChange道具根本不起作用,.on('change', ...而是需要使用.

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