物化选择元素上没有“onChange”事件答案

【问题标题】：No "onChange" event on materialize select element物化选择元素上没有“onChange”事件
【发布时间】：2016-12-18 14:26:12
【问题描述】：

我有这个表单组件：

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 事件从未在此元素上触发？

【问题讨论】：

OnChange event using React JS for drop down的可能重复
不！该事件完全没有触发！这与具有反应性 SELECT 元素无关。
你用的是es6吗？你能多展示一些你的组件吗？
@Donal 此链接与我的问题无关，它解决了击键和 INPUT 元素的问题。我的问题是关于根本没有触发的选择更改。
在 updateFooSelection() 中，您错过了 console.log 末尾的双引号，或者是拼写错误？

标签： javascript dom reactjs materialize

【解决方案1】：

This issue 解释了原因。

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

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

【讨论】：