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

如何解决react.js处理多个复选框字段

我正在研究测验应用程序，希望使我的用户来回浏览问题，并查看他们在先前问题中已经选择的内容。

我正在存储有关在状态中选择的问题和答案的所有数据。 但是，我无法呈现所选的复选框。

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

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呈现为选中状态，并确保我的用户也可以取消选择它们，并根据需要更改它们。

解决方法

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

checked={selectedAnswers.includes(possibleAnswer)

如果true包含在possibleAnswer数组中，则为selectedAnswers。

,

我不确定确切的问题是什么，但我想为您提供答案。由于每个复选框都有一个单独的状态，即“已选中”或“未选中”，因此一个“状态”字段不能解决您的问题，因为对每个复选框都使用一个“状态”字段会一起定义其“已选中/未选中”状态。这就是为什么您有同时检查/取消检查它们的问题。

解决此问题的方法是为每个复选框创建单独的状态字段，但这显然不是最明智的解决方案。因此，我建议您创建一个单独的复选框函数，该函数内部具有一个状态字段，使其对于复选框本身是独立的。在下面提供的代码中，有一个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>
  );
}