onChange function on 复选框不起作用 | ReactJS

Question

我正在学习ReactJS，今天我无法解决一个困难，所以我需要你的帮助。

我想为想要在重新打开网站后保持联系的用户制作"记住我"。

这是我的代码：

我的职能 ：

handleChangeCheckBox = (event) => {
console.log(event.target.checked)
this.setState({
isChecked: event.target.checked
})
}

当我使用 onChange 调用输入复选框字段中的函数时：

<p>
<Input
type="checkbox"
name="rememberCheckbox"
className="rememberCheckbox"
id={this.state.isChecked}
onChange={this.handleChangeCheckBox}
/>
Remember Me
</p>

当我单击复选框时，我的控制台中没有任何内容显示，因此调用函数似乎不起作用。

Answer 1

请尝试一下。 将value替换为checked

<input type="checkbox" 
name="rememberCheckbox"
checked={this.state.isChecked}
onChange={this.handleCheckBox}
/>

Answer 2

在给定网址上测试的代码 在此处输入链接说明

class App extends Component {
constructor(props) {
super(props);
this.state = { isChecked: false };
}
handleCheckBox = event => {
console.log(event.target.checked);
this.setState({
isChecked: event.target.checked
});
};
render() {
return (
<div>
<p>
<input
type="checkbox"
name="rememberCheckbox"
value={this.state.isChecked}
onChange={this.handleCheckBox}
/>
Remember Me
</p>
</div>
);
}
}

Answer 3

欢迎来到堆栈溢出！

根据您共享的代码，您的函数应该被执行。我怀疑您在类中的其他地方而不是您共享的那两个代码片段中存在错误。

你可以检查我用一个非常准系统的实现制作的这个简单的沙箱，就像你拥有的一样：https://codesandbox.io/s/react-simple-check-box-7etp4

您缺少的一件事是使用checkedhtml 属性而不是id。这就是告诉Checbox是否被选中的原因。它将替换用于输入字段的value属性。

您似乎也在使用Input组件。尝试将其更改为普通的 HTMLinput。

Answer 4

它可能触发两次。

如果您使用的是create-react-app则您的App组件将包装在如下所示的StrictMode中：

<React.StrictMode>
<App />
</React.StrictMode>,

转到index.js并删除<React.StrictMode></React.StrictMode>

https://github.com/facebook/react/issues/12856#issuecomment-390206425

Answer 5

handleChangeCheckBox = (( => { this.setState({ isChecked： ！ this.state.isChecked }( }