除非我出于某种原因使用 jQuery,否则我的 onChange()
函数不会运行。我必须在 componentDidMount()
中添加 onChange
监听器的原因是因为我正在使用 MaterializeCSS 将您的 select
标记转换为 ul
。下面的代码工作正常:
onChange(e) {
let inspectionTime = e.target.value;
this.setState({ inspectionTime });
}
componentDidMount() {
let $inspectionDropdown = $(ReactDOM.findDOMNode(this.refs.inspection));
$inspectionDropdown.on('change', this.onChange);
}
但这段代码不会:
onChange(e) {
let inspectionTime = e.target.value;
this.setState({ inspectionTime });
}
componentDidMount() {
let inspectionDropdown = ReactDOM.findDOMNode(this.refs.inspection);
inspectionDropdown.addEventListener('change', this.onChange);
}
如果有帮助的话,这里是整个组件的代码:
import React from 'react';
import ReactDOM from 'react-dom';
class InspectionMode extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.defaultValue = 'selected';
this.state = { inspectionTime: 0 };
}
onChange(e) {
let inspectionTime = e.target.value;
this.setState({ inspectionTime });
}
componentDidMount() {
let inspectionDropdown = ReactDOM.findDOMNode(this.refs.inspection);
inspectionDropdown.addEventListener('change', this.onChange);
}
render() {
let classes = 'input-field col s10 offset-s1 l3';
return (
<div className={classes}>
<select onChange={this.onChange} ref="inspection" value={this.state.inspectionTime}>
<option value="0">None</option>
<option value='5'>5 Seconds</option>
<option value='10'>10 Seconds</option>
<option value='15'>15 Seconds</option>
</select>
<label>Inspection Time</label>
</div>
);
}
}
export default InspectionMode;
最佳答案
问题在于插件正在发出自定义更改事件。 React 的事件系统无法识别自定义事件(不确定原因)。
在这种情况下,手动更改监听器是正确的解决方案。改进方法是将选择元素抽象为“原子”。
class Select extends React.Component {
static propTypes = {
value: React.PropTypes.string,
options: React.PropTypes.arrayOf(
React.PropTypes.shape({
text: React.PropTypes.string.isRequired,
value: React.PropTypes.string.isRequired,
})
).isRequired
};
constructor() {
super();
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.props.onChange(e.target.value);
}
componentDidMount() {
let select = this.refs.select;
select.addEventListener('change', this.onChange, false);
}
componentWillUnmount(){
let select = this.refs.select;
select.removeEventListener('change', this.onChange, false);
}
render() {
let classes = 'input-field col s10 offset-s1 l3';
return (
<div className={classes}>
<select ref="select" value={this.props.value}>
{this.props.options.map((x) => {
return <option key={x.value} value={x.value}>{x.text}</option>;
})}
</select>
</div>
);
}
}
然后您可以在 InspectionMode 或 UI 中的任何其他地方使用它。
class InspectionMode extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.value = 'selected';
this.state = { inspectionTime: 0 };
}
onChange(inspectionTime) {
this.setState({ inspectionTime });
}
render() {
return (
<div>
<Select
value={this.state.inspectionTime}
onChange={this.onChange}
options={[
{value: '0', text: 'None'},
{value: '5', text: '5 seconds'},
{value: '10', text: '10 seconds'},
{value: '15', text: '15 seconds'},
]}
/>
<label>Inspection Time</label>
</div>
);
}
}
关于javascript - onChange 回调未在 React 组件中触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33457220/