我是React.js的新手,似乎无法让任何事件处理程序工作。每当我在render函数之外创建一个事件处理程序而不是一个匿名的内部类时,我都会得到上面引用的错误。有人可以指出我做错了吗?
class Checkboxes extends Component{
constructor(props) {
super(props);
this.state = { checked: [true, true],
frame: [values, values],
title: ['A', 'B'] };
this.handleChange= this.handleChange.bind(this);
}
handleChange(e) {
let index= e.target.id;
let newState = this.state.checked.slice();
newState[index] = !this.state.checked[index];
this.setState ({checked: newState});
}
render(){
const selectionBoxes = this.state.title.map(function(title, index) {
return (
<div className="w3-checkbox" id={index} onClick={this.handleChange}>
<input
type="checkbox"
label={'Division '+title}
value={this.state.checked[index]}
checked={!this.state.checked[index]}
onChange= {this.handleChange}
id={index} />
<label id={index} onClick={this.handleChange}>
{'Division '+ title}
</label>
</div>
);
});
const frameDisplay = this.state.frame.map(function(frame, index) {
return (
<div>
{this.state.checked[index]} ? null :
<DivFrame frameId={frame} width={this.state.width} height={this.state.height} title={this.state.title[index]} />
</div>
);
});
return (
{selectionBoxes}
);
}
};
export default Checkboxes;
答案 0 :(得分:0)
似乎即使您在构造函数中绑定了handleChange
到this
,它仍然不在this.state.title.map(function(title, index) {...
函数范围内。我只需将this.state.title.map(function(title, index) {...
更改为this.state.title.map((title, index) => {...
这是ES6语法,并自动为我做绑定。
在这里查看演示:https://codesandbox.io/s/py2zp8z1kj
请注意,为了简单起见,我删除了与框架组件有关的代码,因为它与问题没有关系,并且减少了必须实现该组件所需的工作。要使事件处理程序也在该组件上工作,尽管您还必须将映射函数的回调更改为ES6语法。
此外,您会注意到在return
方法的render()
中,我删除了大括号因为您不需要它们,因为selectionBoxes
是原始html并且不需要被评估。实际上对它进行评估({ selectionBoxes}
)会将selectionBoxes
的值转换为不是有效反应子对象的对象。所以请将selectionBoxes
放在渲染块中。
如果您无法查看演示,则代码如下所示:
class Checkboxes extends Component {
constructor(props) {
super(props);
this.state = {
checked: [true, true],
frame: [0, 1],
title: ['A', 'B']
};
}
handleChange(e) {
let index = e.target.id;
let newState = this.state.checked.slice();
newState[index] = !this.state.checked[index];
this.setState({ checked: newState });
}
render() {
const selectionBoxes = this.state.title.map( (title, index) => {
return (
<div className="w3-checkbox" id={index} onClick={this.handleChange}>
<input
type="checkbox"
label={'Division ' + title}
value={this.state.checked[index]}
checked={!this.state.checked[index]}
onChange={this.handleChange}
id={index} />
<label id={index} onClick={this.handleChange}>
{'Division ' + title}
</label>
</div>
);
});
return (
selectionBoxes
);
}
};
export default Checkboxes;