物化选择onChange的未调用

Question

My onChange() is not calling using materializecss select . :

JavaScript:

$(document).ready(function() {
  $('select').material_select();
});

React:

...

_bar: function(e){
  console.log("I was called");
},

// Render():

<select defaultValue={this.state.foo} onChange={this._bar}>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

...

The funny thing is, if I add the class browser-default , on the select tag, bar() is called. Any way around this without the class added to select?

Answer 1

Look like you use incompatible tools. As usual, you SHOULD NOT use jquery dom functions with react, because in 90 % cases it is useless, it can break some native react logic with virtual dom, and of course it is overhead.

Try to use this library:

https://react-materialize.github.io/forms.html