如何使复选框默认选中？ [复制]

Question

我正在制作一个需要从数据中填充动态复选框的反应应用程序。

  const sectors = [
    {
      SectorID: 5,
      Name: "Wood Truss/Panel/Building Components"
    },
    {
      SectorID: 33,
      Name: "LBM Retail/Pro Contractor"
    },
    {
      SectorID: 24,
      Name: "Light Gauge Steel Truss/Panel"
    }
  ];

那么我这里确实有一个选中复选框的列表，

  const selectedSectors = [
    {
      SectorID: 5
    },
    {
      SectorID: 24
    }
  ];

所以这里使用SectorID，我们可以找到匹配项。

预期结果：需要在加载时检查所选扇区。

我尝试过的解决方案：

  const [checkedItems, setCheckedItems] = useState({});

  React.useEffect(() => {
    const newData = sectors.map((sector) => {
      return selectedSectors.map((selected) => {
        if (selected.SectorId === sector.SectorId) {
          setCheckedItems((prev) => {
            const checkedItems = {
              ...prev.checkedItems,
              [sector.Name]: true
            };
            return { ...prev, checkedItems };
          });
        }
      });
    });
  }, []);

上面没有检查选定的扇区，我认为我在这里做错了。

填充复选框，如：

      {sectors &&
        sectors.map((sector, index) => (
          <React.Fragment key={index}>
            <label className="block mr-4">
              <input
                className="mx-2 leading-tight"
                name={sector.Name}
                checked={checkedItems[sector.Name]}
                onChange={(e) => handleInputChange(e, sector)}
                type="checkbox"
              />
              <span className="text-sm">{sector.Name}</span>
            </label>
          </React.Fragment>
        ))}

代码沙盒：

要求：请帮助我在与selectedSectors..进行比较时默认选中复选框。

Answer 1

如果您不需要对选中状态执行任何操作，那么您应该使用defaultChecked 属性并简单地在selectedSectors 数组中搜索匹配项。

defaultChecked={selectedSectors.some(
  (selectedSector) =>
    selectedSector.SectorID === sector.SectorID
)}

如果您想保持checkedItems 状态，那么您可以在效果中初始化您的状态。遍历sectors 数组并将扇区ID 减少为选定值的对象

React.useEffect(() => {
  const defaultCheckedSectors = sectors.reduce(
    (defaultChecked, sector) => ({
      ...defaultChecked,
      [sector.SectorID]: selectedSectors.some(
        (selectedSector) => selectedSector.SectorID === sector.SectorID
      )
    }),
    {}
  );
  setCheckedItems(defaultCheckedSectors);
}, []);

更新checked 属性以使用SectorId。

<input
  className="mx-2 leading-tight"
  name={sector.Name}
  checked={checkedItems[sector.SectorID]} // <-- use SectorID
  onChange={(e) => handleInputChange(e, sector)}
  type="checkbox"
/>

您还需要更新handleInputChange 以使用该扇区。 或者，您也可以简单地传递 SectorID 值。

const handleInputChange = (event, sector) => { // <-- consume sector
  const { checked } = event.target;
  setCheckedItems(prev => ({
    ...prev,
    [sector.SectorID]: checked // <-- use sector for ID
  }))
};

Answer 2

您无需创建另一个包含选中项的数组。只需更改您的输入，例如-

<input className="mx-2 leading-tight"
    name={sector.Name}
    checked={!!selectedSectors.find(item => item.SectorID === sector.SectorID)}
    onChange={(e) => handleInputChange(e, sector)}
    type="checkbox" />

Answer 3

这整个方法并不完全是 React 的方法。在状态中应该有一个单一的事实来源来跟踪扇区的值以及是否被检查过。并且应该使用useState 的初始状态来确定最初检查的状态。

查看 this code sandbox I forked from yours 以查看它以更 React-y 的方式重写