javascript - 当复选框在行项目级别（不是批处理行项目级别，只是主要的）更改时，所有批处理行项目也会更改

Question

当“再次使用”复选框在订单项级别（不是批处理订单项级别，只是主要订单项级别）更改时，所有批处理订单项也会更改。

在批次行项目级别更改“再次使用”复选框时，只有一个批次行项目复选框受到影响。

{
  /*Use Again*/
}

{
  values.transactions.goodsMovements.transactionItems[index].transactionType ===
    "2" &&
    useAgain === 200 && (
      <>
        <td>
          <MyCheckbox1
            id={`transactions.goodsMovements.transactionItems[${index}].transactionLineItems[${i}].useAgain`}
            name={`transactions.goodsMovements.transactionItems[${index}].transactionLineItems[${i}].useAgain`}
          />
          {tlItems.expanded &&
            tlItems.batchSplits.batchSplitLineItems &&
            tlItems.batchSplits.batchSplitLineItems.length > 0 &&
            tlItems.batchSplits.batchSplitLineItems.map((bd, j) => (
              <div>
                <MyCheckbox1
                  id={`transactions.goodsMovements.transactionItems[${index}].transactionLineItems[${i}].batchSplits.batchSplitLineItems[${j}].useAgain`}
                  name={`transactions.goodsMovements.transactionItems[${index}].transactionLineItems[${i}].batchSplits.batchSplitLineItems[${j}].useAgain`}
                />
              </div>
            ))}
        </td>
      </>
    );
}

标签： javascriptreactjs

Answer 1

我不知道MyCheckbox1你的代码中有什么。您需要进行 3 次更改才能满足您的要求。

1. checked为父复选框和子项/子项的复选框显式添加一个属性，以指示该复选框是否被选中。喜欢

<MyCheckbox1
  id=....
  name=....
  checked={IS_USE_AGENT_CHECKED}
/>

IS_USE_AGENT_CHECKED是每个复选框的状态（对于父级和子级）。您需要IS_USE_AGENT_CHECKED像以下步骤一样处理代码中的值。

2. 处理onClick父项的复选框事件，如

<MyCheckbox1
  id=....
  name=....
  checked={IS_USE_AGENT_CHECKED}
  onClick={FUNCTION_TO_HANDLE_THE_EVENT}
/>

我不知道你的事件名称MyCheckbox1，它应该是等价于onChange或onClick的，当复选框的状态改变时可以触发。在FUNCTION_TO_HANDLE_THE_EVENT中，如果checked状态为真，则设置所有子项为IS_USE_AGENT_CHECKED真。如果为假，则设置所有孩子的IS_USE_AGENT_CHECKED假。

3. 处理onClick子复选框的事件，比如

<MyCheckbox1
  id=....
  name=....
  checked={IS_USE_AGENT_CHECKED}
  onClick={FUNCTION_TO_HANDLE_THE_EVENT}
/>

在此FUNCTION_TO_HANDLE_THE_EVENT，更改IS_USE_AGENT_CHECKED当前项目。