javascript - 如何在 React.js 中的按钮上选中/取消选中带有 onClick 事件的复选框？

Question

import React from 'react';
import './App.css';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div>
      <input type="checkbox" id="checkboxForHamburger" />

      <Button onClick={??????}> UNCHECK </Button>
    </div>
  );
}

export default App;

我有一个复选框和一个按钮。如果单击按钮，我希望复选框处于“未选中”状态。

我试过的-

<Button onClick={document.getElementById("checkboxForHamburger").checked = false}> UNCHECK </Button>

这给我一个错误 - 无法将属性“选中”设置为 null

Answer 1

首先，您的复选框不受状态值控制:

让我们从添加状态开始:

const [checked, setChecked] = React.useState(true);

然后我们将值赋给复选框:

<input type="checkbox" checked={checked} />

然后让我们告诉按钮切换选中状态

<button onClick={() => {setChecked(old => !old)}}> {checked ? 'uncheck' : 'check'} </button>

关于 this codesandbox 的工作示例