确定勾选复选框的方法（useState）

Question

这是我第一次开发 React 应用程序。我试图在表格的每一行中实现复选框并检查选择了哪些行。

我使用 useState 钩子来制作已检查和 onChange 事件，但当我检查然后取消选中复选框时，这些值似乎没有刷新。

我想问一下如何添加一个逻辑来删除挂钩上未勾选的值。

T1 Checkbox A- Checked 复选框 B- Checked CheckedMap- A,B

T2 Checkbox B- Unchecked CheckedMap- A,B // 未勾选的Checkbox B也存储在CheckedMap中

谢谢您的帮助。

 export default function({ infinite }) {
  const [checkedMap, setCheckedMap] = useState(new Map());
}

const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    modifiedMap.set(transaction_seq, !checkedMap.get(transaction_seq));
    setCheckedMap(modifiedMap);
  };

const columns = [
    {
      Header: "Transaction(s)",
      className: "left",
      columns: [
        {
          id: "checkbox",
          accessor: "checkbox",
          Cell: ({ row }) => {
            return (
              <input
                type="checkbox"
                className="checkbox"
                checked={checkedMap.get(row.original.transaction_seq)}
                onChange={() =>
                  handleCheckedChange(row.original.transaction_seq)
                }

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是如何将受控复选框与 react useState 钩子一起使用的方式。

 const { useState } = React; // --> for inline use
// import React, { useState } from 'react';  // --> for real project

const App = () => {
  const [checked, setChecked] = useState(false)
  const handleClick = () => setChecked(!checked)

  return <input onClick={handleClick} checked={checked} type="checkbox" />
};

ReactDOM.render(<App />, document.getElementById('root'))

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

原文由 gazdagergo 发布，翻译遵循 CC BY-SA 4.0 许可协议