如何在复选框更改事件中填充布尔值数组？

Question

我想做的是，用布尔值填充答案数组 values.My 复选框是动态填充的，但只有四个。如果未选中复选框，则其值应为 false，如果选中，则应为 true.Values 应对应于数组索引，我的意思是，如果第一个复选框被切换，则只有答案 [0] 应该更改，如果第二个复选框被更改，则答案[1] 等等..

沙盒https://codesandbox.io/s/elated-thompson-7rthy?file=/src/App.js

如果您也能帮我设置选中的值，我将不胜感激。

最后我将这个值设置为上下文存储，最后发送到服务器。

const Quiz1 = (props) => {
      const [answers, setAnswers] = useState([false, false, false, false]);

  const handleChange = (e) => {
     setAnswers([...answers, e.target.checked]);
     setQuizState({ id: 0, question_id: question.question_id, answer: [answers] });
  };
    return (
    {question?.options?.map((option, i) => { 
       <Checkbox
         id={i}
         name={option}
         checked={WHAT TO PUT HERE?}
         onChange={(e) => handleChange(e)}
      />}
 )
}

Answer 1

如果我没理解错的话，你可以直接使用地图函数的索引来使用正确答案索引。

checked={answer[i]}

设置setAnswers([...answers, e.target.checked]) 会将新的新事件值附加到您的答案数组。相反，您应该覆盖答案值。

answer[i] = e.target.value

Answer 2

您可以对状态进行浅表复制并更改其值。这是您想要的东西的简单示例：

import { useEffect, useState } from "react";

const Quiz1 = (props) => {
  const question = {
    options: ["1", "2", "3", "4"]
  };

  const [answers, setAnswers] = useState([false, false, false, false]);

  useEffect(() => {
    console.log(answers);
  }, [answers]);

  const handleChange = (e, i) => {
    let copy = [...answers];
    let current = copy[i];
    current = e.target.checked;
    copy[i] = current;
    setAnswers(copy);
  };
  return question?.options?.map((option, i) => {
    return (
      <>
        <label>{option}</label>
        <input
          aria-label={option}
          id={i}
          name={option}
          checked={answers[i]}
          type="checkbox"
          onChange={(e) => handleChange(e, i)}
        />
      </>
    );
  });
};
export default function App() {
  return <Quiz1 />;
}

如何在复选框更改事件中填充布尔值数组？

How to fill array of boolean values on checkbox change event?

html

javascript

arrays

checkbox

reactjs