如何保持复选框的状态？

Question

我有 3 个不同组（A 组、B 组和 C 组）的用户列表，我可以按他们的姓名进行搜索。每个用户旁边都有一个复选框。我的问题是，即使我单击一个复选框（例如：Alex 旁边的复选框），然后我开始输入 Alex，我注意到我的复选框不再被选中。我猜这是因为每次我输入一个字符时 React 都会重新渲染组件。如何保留复选框的值？我愿意使用本地存储，但具体实施是什么？预先感谢！

这是我的现场演示

<article>
      <h2>
        {post.label}{" "}
        <span onClick={() => setShowGroup(!showGroup)}>
          {showGroup ? "-" : "+"}
        </span>
      </h2>
      {showGroup && (
        <div>
          {post.fields?.map((field: any, idx: number) => {
            return (
              <div key={idx}>
                <input type="checkbox" name="" id="" />
                <span>{field?.name}</span>
                <br />
              </div>
            );
          })}
        </div>
      )}
</article>

Answer 1

一种方法是在 app.tsx 上创建状态（因为您已经在那里创建了一些状态）

const [checkboxStates, setCheckboxStates] = useState({});

并在帖子中使用它（例如通过列表组件传递它）

const Post = ({ post, checkboxStates, setCheckboxStates }) => {

 ...

  const handleCheckboxChange = (field, isChecked) => {
    const key = `${post.label}_${field.name}`;
    setCheckboxStates((prevState) => ({
      ...prevState,
      [key]: isChecked
    }));
  };

....

<input
 type="checkbox"
 checked={isChecked}
 onChange={(e) => handleCheckboxChange(field, e.target.checked)}
/>

...

我给你分叉了一个活生生的例子： https://codesandbox.io/s/react-typescript-helloworld-forked-stsx26?file=/src/App.tsx