ReactJS-复选框onChange事件未触发

Question

我正试图在React中实现一组复选框，这些复选框是从一个对象呈现的，如下所示：

constructor() {
this.state.todo = {
eat: true,
sleep: false,
react: true
}
this.toggleCheckbox = this.toggleCheckbox.bind(this);
}
toggleCheckbox(e){
console.log(e); // nothing :-/
}
render() {
return (
<div>
{ Object.keys(this.state.todo).map((val, i) => (          
<div key={i} >
<input 
type="checkbox" 
value={val} 
onChange={this.toggleCheckbox} 
checked={this.state.todo[val]} 
/><label>{val}</label>
</div>
))}
</div>
)
}

所有渲染都正确，但我无法更改任何复选框。没有触发控制台记录toggleCheck()事件。

我试过使用onClick和onChange，但没有效果。

Answer 1

您从this.state.tables获取密钥，但您的状态称为this.state.todo。

您可以将每个值用作name，并使用该值切换相关的todo状态属性。

示例

class App extends React.Component {
state = {
todo: {
eat: true,
sleep: false,
react: true
}
};
toggleCheckbox = e => {
const { name } = e.target;
this.setState(prevState => ({
todo: {
...prevState.todo,
[name]: !prevState.todo[name]
}
}));
};
render() {
return (
<div>
{Object.keys(this.state.todo).map((val, i) => (
<div key={i}>
<input
type="checkbox"
name={val}
onChange={this.toggleCheckbox}
checked={this.state.todo[val]}
/>
<label>{val}</label>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>