如何使复选框默认选中？

Question

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

  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>
        ))}

Codesandbox:

要求：请帮我让复选框在与selectedSectors..

比较时默认选中

Answer 1

您无需创建另一个包含选中项的数组。只需像-

这样更改您的输入

<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 2

如果您不需要对选中状态执行任何操作，那么您应该使用 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 3

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

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

如何使复选框默认选中？

How to make the checkbox checked default?

html

javascript

checkbox

reactjs