react.js 处理多个复选框字段

Question

我正在开发一个测验应用程序，并希望让我的用户来回检查问题，看看他们在之前的问题中已经选择了什么。

我正在存储有关他们在该州选择的问题和答案的所有数据。 但是，我无法按应有的方式呈现选定的复选框。

如果我在选中的字段中放置一个变量，就像下面的（复选框）一样，那么问题中的所有复选框都会受到影响，我只想检查选定的复选框。 这是示例代码

https://codesandbox.io/s/confident-night-zyy2h?file=/src/App.js

import React, { useState } from "react";
import "./styles.css";

const answersArray = ["answer1", "answer2", "answer3", "answer4"];
const selectedAnswers = ["answer1", "answer3"]


export default function App() {
  const [checkbox, setCheckbox] = useState(false);

  function handleCheckbox() {}

  return (
    <div className="App">
      <h1>question 1 - how to manipulate the checkboxes</h1>

      {answersArray.map((possibleAnswer, index) => (
                        <li key={[index, possibleAnswer]}>
                            <div>
                                <input
                                    name={[index, possibleAnswer]}
                                    type="checkbox"
                                    
                                    onChange={(event) => handleCheckbox(event, index)} 
                                    checked={checkbox}
                                  />
                                
                            </div>
                            <div>
                                <span>{possibleAnswer}</span>
                            </div>
                        </li>
                    )
                    )}
    </div>
  );
}

关于如何解决这个问题的任何想法？例如，我想将答案 1 和 3 呈现为选中状态，并确保我的用户也可以取消选择它们并根据需要进行更改。

Answer 1

我不太确定确切的问题是什么，但我想为您提供我的答案。由于每个复选框都有被选中或未选中的单独状态，因此一个状态字段不能解决您的问题，因为使用一个状态字段为所有复选框定义它们的选中/未选中状态。这就是为什么您遇到同时选中/取消选中它们的问题。

解决这个问题的方法是为每个复选框创建单独的状态字段，但显然这不是最聪明的解决方案。因此，我建议您创建一个单独的复选框函数，该函数内部有一个状态字段，使其对复选框本身来说是独立的。在我下面提供的代码中，有一个 ESLint 错误，如果您创建一个单独的文件并将函数移到那里，它将得到解决。

此外，如果您想在 selectedAnswers 数组中添加或删除项目，您可以在 onChange 函数中执行此操作。希望这能回答你的问题。

import React, { useState } from "react";
import "./styles.css";

const answersArray = ["answer1", "answer2", "answer3", "answer4"];
const selectedAnswers = [];

export default function App() {
  const checkboxComponent = (index, possibleAnswer) => {
    const [checked, setChecked] = useState(false);
    return (
      <>
        <div>
          <input
            name={[index, possibleAnswer]}
            type="checkbox"
            onChange={() => setChecked(!checked)}
            checked={checked}
          />
        </div>
        <div>
          <span>{possibleAnswer}</span>
        </div>
      </>
    );
  };

  return (
    <div className="App">
      <h1>question 1 - how to manipulate the checkboxes</h1>
      {answersArray.map((possibleAnswer, index) => (
        <li key={[index, possibleAnswer]}>
          {checkboxComponent(index, possibleAnswer)}
        </li>
      ))}
    </div>
  );
}

Answer 2

您可以在您的输入检查属性上执行此操作：

checked={selectedAnswers.includes(possibleAnswer)

如果possibleAnswer 包含在selectedAnswers 数组中，这将是true。