我有这个表单组件:
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
事件从未在此元素上触发?
最佳答案
This issue解释原因。
基本上,ònChange
属性根本不起作用,需要使用 .on('change', ...
代替。
initialiseWidgets() {
Materialize.updateTextFields();
$(this.refs.selectFoo).on('change', function () {
console.log('yay!');
}).material_select();
}
关于javascript - 物化选择元素上没有 "onChange"事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38903287/