select要素

Question

私は、このフォームコンポーネント持ってマテリアライズ上いいえ「のonChange」イベント：

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を理解しようとしましたが、そのような要素の例はありません。

MaterializeがReactであるselect要素に対してchangeイベントを取得するにはどうすればよいですか？

どうすればonChangeイベントはこの要素に対して決して発せられませんか？

Answer 1

This issueの理由を説明します。

基本的に、ònChange小道具は単純に機能しません。代わりに.on('change', ...を使用する必要があります。

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