从对象值反应更新复选框

Question

我正在尝试使用来自 tableData 的值属性来控制复选框。默认情况下，该值为 true.

let newData = newRes.data.map((e) => {
        return {
          ...e,
          installmentChecked: true,
          lateFeeChecked: true,
          depositChecked: true,
          collectionChecked: true,
        };
      });
     setTableData(newData);

映射数据后，我return这样输入。

const { data, index } = props;
return(
...
<input
  type="checkbox"
  value={latefee}
  checked={data?.lateFeeChecked}
  onChange={() => onChangeCheckbox('lateFeeChecked', index,data?.lateFeeChecked)}
/>
...

这就是我处理对象值的方式。

const onChangeCheckbox = (key, index,status) => {
    tableData[index][key] = !tableData[index][key];
    console.log(tableData[index][key], 'props key');
    console.log(status, 'status');
  };

我遇到的问题是，复选框根本不会改变。当我点击时，控制台显示。

false 'props key'
true 'status'

我的代码有问题吗？或者也许有人可以给我一个更好的方法来处理 React 中的复选框？感谢您之前的任何回复。

Answer 1

您需要让 React 知道重新渲染您的组件。您需要使用 useState 钩子来实现。

您似乎有 setTableData，不清楚是否通过您共享的代码连接到 useState。

如果是，你需要这样做：

const onChangeCheckbox = (key, index,status) => {
    setTableData({
      ...tableData, 
      [index][key]: !tableData[index][key],
    });
  };

Answer 2

const { data, index } = props;
return(
...
<input
  type="checkbox"
  value={latefee ? ‘true’:’’}
  checked={data?.lateFeeChecked ? ‘checked’ : ‘’}
  onChange={() => onChangeCheckbox('lateFeeChecked', index,data?.lateFeeChecked)}
/>

你可以试试这个，因为有时html不理解React中提供的布尔值，在这种情况下我们需要在字符串中提供布尔值。

从对象值反应更新复选框

React update checkbox from object value

html

checkbox

reactjs