时间戳

首页 > 解决方案 > 如何在 React.js 中的按钮上选中/取消选中带有 onClick 事件的复选框？

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

问题描述

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>

这给了我一个错误 -无法设置属性“已检查”为空

标签： javascriptjqueryreactjs

解决方案

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

让我们从添加一个状态开始：

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

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

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

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

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

此代码框的工作示例

推荐阅读