复选框上的 onChange 功能不起作用 |反应JS答案

【问题标题】：onChange function on checkbox isn't working | ReactJS复选框上的 onChange 功能不起作用 |反应JS
【发布时间】：2020-05-03 04:50:27
【问题描述】：

我正在学习 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>

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

【问题讨论】：

那是什么Input 组件？
这是一个 reactstrap 输入
看起来您正在使用 UI 工具包，或者您应该将 <Input/> 更改为 <input/>
请参考本期链接stackoverflow.com/questions/26615779/…
查看codesandbox.io/s/rememberme-input-3rz12

标签： reactjs function onchange

【解决方案1】：

它可能会触发两次。

如果您使用的是create-react-app，那么您的Appcomponent 将被包裹在StrictMode 中，如下所示：

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

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

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

【讨论】：

【解决方案2】：

请试试这个。将value 替换为checked

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

【讨论】：

【解决方案3】：

在给定 url 测试的代码 enter link description here

 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>
    );
  }
}

【讨论】：

您好，感谢您的回复。您的解决方案不起作用，但感谢您的帮助！
您的代码在您提供的网址上工作，但在我的网址上，当我更正所有内容时它不起作用

【解决方案4】：

欢迎来到堆栈溢出！

根据您共享的代码，您的函数应该正在执行。我怀疑您在课堂上的其他地方有错误，而不是在您共享的那两个代码 sn-ps 中。

您可以查看我使用非常简单的实现制作的这个简单沙箱，就像您拥有的那样：https://codesandbox.io/s/react-simple-check-box-7etp4

您缺少的一件事是使用checked html 属性而不是id。这将告诉复选框它是否被选中。它替换了您用于输入字段的value 属性。

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

【讨论】：