Deaktivieren Sie mehrere Kontrollkästchen in der Kontrollkästchengruppe mithilfe von React-Hooks

Question

Ich habe mehrere Kontrollkästchen in mehreren Kontrollkästchengruppen ausgeführt. Ich kann nicht herausfinden, wie ich ein bestimmtes Kontrollkästchen deaktivieren (und damit den Status ändern) kann. Aus irgendeinem Grund kann ich nicht auf e.target.checked zugreifen.

<Kontrollkästchen
      Größe="klein"
      name={item}
      value={item}
      geprüft={checkboxvalues.includes(item)}
      onChange={(e) => handleOnChange(e)}
  />

und meine Funktionen

const handleOnChange = (e) =>
   const check = e.target.checked;
   setChecked(!check);
};

Ich habe ein funktionierendes Beispiel der Komponente in dieser Sandbox erstellt.

Answer 1

这是我如何做的：https://codesandbox.io/s/elastic-pateu-flwqvp?file=/components/Selectors.js

我将选择逻辑抽象成了一个useSelection()自定义钩子，这意味着当前选择可以在store[key].selected中找到，其中key可以是selectors的任何键。

每个useSelection()调用中的items、selected、setSelected和sectionLabel都存储在store[key]中，并传递给一个<CustomCheckboxGroup />组件。

相关部分是该组件内的handleCheck函数，它根据先前选择的值设置新的选择：如果当前item包含在先前的selected值中，则将其移除。否则，将其添加。

---

更详细的解释（为什么）

仔细观察你的代码，似乎你对React中的复选框组件的工作原理感到困惑。

input的checked属性由一个boolean状态控制。通用示例：

const Checkbox = ({ label }) => {
  const [checked, setChecked] = useState(false)
  return (
    <label>
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <span>{label}</span>
    </label>
  )
}

在每次渲染时，<input />的checked值根据checked状态的当前值设置。当输入的checked发生变化（用户交互时），状态不会自动更新。但是onChange事件被触发，我们使用它来将状态更新为状态先前值的负值。

---

当处理<CheckboxList />组件时，我们不能使用单个布尔值来控制所有复选框，我们需要为正在渲染的每个复选框设置一个布尔值。因此，我们创建一个selected数组，并将每个<input />的checked值设置为selected.includes(item)的值（返回一个boolean）。

为了使其工作，我们需要在每个onChange事件中更新selected数组的值。我们检查item是否包含在先前版本的selected中。如果存在，则将其过滤掉。如果不存在，则将其添加进去：

const CheckboxList = ({ items }) => {
  const [selected, setSelected] = useState([])
  const onChecked = (item) =>
    setSelected((prev) =>
      prev.includes(item)
        ? prev.filter((val) => val !== item)
        : [...prev, item]
    )

  return items.map((item) => (
    <label key={item}>
      <input
        type="checkbox"
        checked={selected.includes(item)}
        onChange={() => onChecked(item)}
      />
      <span>{item}</span>
    </label>
  ))
}

希望这能解决一些问题。

Answer 2

您需要为每个组创建特定的handleOnChange函数。我已经为Genre复选框组创建了一个类似的函数，您可以按照相同的方式为其他组创建。

这是处理函数。

const handleOnChangeGenre = (e) => {
    let newValArr = [];
    if (e.target.checked) {
      newValArr = [...state.pillarGenre.split(","), e.target.value];
    } else {
      newValArr = state.pillarGenre
        .split(",")
        .filter((theGenre) => theGenre.trim() !== e.target.value);
    }
    setState({ ...state, pillarGenre: newValArr.join(",") });
  };

将此函数作为handleOnChange属性传递给CustomCheckboxGroup，如下所示。

<CustomCheckboxGroup
          checkboxdata={genres}
          checkboxvalues={state.pillarGenre}
          value={state.pillarGenre}
          sectionlabel="Genre"
          onToggleChange={handleGenreSwitch}
          togglechecked={genreswitch}
          handleOnChange={handleOnChangeGenre}
        />

为了测试，请注释掉您的handleOnChange函数。

在沙箱中查看完整的工作解决方案 - 完整代码