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

Posted 2023-02-14

【中文标题】如何在复选框更改事件上填充布尔值数组？

【英文标题】：How to fill array of boolean values on checkbox change event?

【发布时间】：2022-01-07 00:14:21

【问题描述】：

我想做的是用布尔值填充答案数组。我的复选框是动态填充的，但只有四个。如果未选中复选框，则其值应为 false，如果选中，则应为 true。值应对应于数组索引，我的意思是，如果第一个复选框被切换，则只有答案 [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)
      />
 )

【问题讨论】：

你能在codesandbox分享你的代码示例吗？

给你codesandbox.io/s/elated-thompson-7rthy?file=/src/App.js

【参考方案1】：

您可以制作状态的浅表副本并更改其值。这是您想要的东西的简单示例：

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 />;

【参考方案2】：

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

checked=answer[i]

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

answer[i] = e.target.value

【讨论】：

您对第一部分是正确的，我认为检查值可以这样确定。但是将目标值分配给 answer[i] 是行不通的，因为我猜它是一个 React 状态。

你绝对可以这样做。因为它是一个数组（引用类型），你可以像这样更新值。虽然它不会使用 useState() 更新，那么你应该添加 useEffect(() ,How to Answer) 。浅拷贝实际上和我做的解决方案一样