如何获取React复选框值

Question

我正在构建一个简单的密码生成器，用户单击“提交”按钮，就会根据选中的输入复选框显示密码。

我目前每个复选框有 4 个状态，以及一个简单的输入文件，该文件返回带有复选框的简单输入。我将此输入文件称为它们的每个状态作为道具以及它们都使用的事件处理程序。

所以我目前陷入了如何查看哪些输入复选框被勾选、哪些没有被勾选的问题...当我尝试查看时，要么它们全部被勾选，要么它们全部为假（即使复选框 1 和 2 为假）并且复选框 3 和 4 为真）。

我有点困惑为什么这不起作用......有什么帮助吗？

如果您希望我提供一些代码以帮助更好地理解，请告诉我

Answer 1

您可以将状态保存在对象中，并在更改时更新其值，例如：

export default function App() {
  const [conditions, setConditions] = useState({
    a: false,
    b: false,
    c: false,
    d: false,
  });

  function handleChange(key) {
    setConditions((prev) => ({ ...prev, [key]: !prev[key] }));
  }

  function onSubmit(event) {
    event.preventDefault();
    generatePassword(conditions);
  }

  return (
    <form onSubmit={onSubmit}>
      {Object.entries(conditions).map(([key, value]) => (
        <label key={key}>
          {key}
          <input
            checked={conditions[key]}
            onChange={() => handleChange(key)}
            type="checkbox"
          />
        </label>
      ))}
      <button>Generate</button>
    </form>
  );
}

function generatePassword({ a, b, c, d }) {
  console.log("Generating password with the following params", { a, b, c, d });
}