Question

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

我使用了useState钩子进行了check和onChange事件，但是当我选中然后取消选中该复选框时，值似乎没有刷新。

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

T1 复选框A-已选中复选框B-已选中 CheckedMap- A，B

T2 复选框B-未选中 CheckedMap- A，B //未选中的复选框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)
                }

Answer 1

您可以在地图中检查检查状态，然后决定是设置还是删除该值

const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    if(checkedMap.get(transaction_seq)) {
        modifiedMap.delete(transaction_seq)
    } else {
        modifiedMap.set(transaction_seq, true);
    }
    setCheckedMap(modifiedMap);
  };

Answer 2

这是使用带有react def __init__(self, debugMode=false): self.isDebug = debugMode ... if(self.isDebug): self.Write()= (self, output) => { self.f.write(output) print(output) }钩子的复选框的方法。

useState

// import React, { useState } from 'react';

const App = () => {
  const [checked, setChecked] = React.useState(false)
  const handleClick = () => setChecked(!checked)
  
  return <input onClick={handleClick} checked={checked} type="checkbox" />
};


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

确定反应中已选中复选框的方法（useState）

2 个答案: