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获取select元素的更改事件？

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

Answer 1

This issue解释了原因。

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

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

不＆＃34; onChange＆＃34;物化选择元素的事件

1 个答案: