Reactjs 在复选框被选中为false后，如何将二进制设置回零？

我有一个useState钩子，其中我有一个0的数组，如下

const[binary，setBinary]=useState（[0,0,0,0,0,0,0]）
然后我有一个名为isToggled的函数，其中我将toggle设置为true，并将变量bin设置为二进制值，该二进制值随后被切片和concat，然后使用hook进行设置。到目前为止，我的工作方式是，当复选框未选中时，所有0都将变为1，但不会变为零。

然后在输入字段onChange中使用它，如下所示

<input type="checkbox" onChange={(e, b) => isToggled(0, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(1, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(2, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(3, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(4, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(5, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(6, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(7, b)} />

isToggled（0，b）}/>
isToggled（1，b）}/>
isToggled（2，b）}/>
isToggled（3，b）}/>
isToggled（4，b）}/>
isToggled（5，b）}/>
isToggled（6，b）}/>
isToggled（7，b）}/>

和在文本输入字段中

<input
   name="binary"
   type="text"
   value={binary}
   onChange={binary.join("")}
/>



整个代码如下

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

function Binary() {
  const [binary, setBinary] = useState([0, 0, 0, 0, 0, 0, 0, 0]);
  const [toggle, setToggle] = useState(false);
  const [decimal, setDecimal] = useState(0);
  const isToggled = (form) => {
    setToggle(true);
    let bin = binary
      .slice(0, form)
      .concat([toggle ? 1 : 0])
      .concat(binary.slice(form + 1));
    setBinary(bin);
  };
  const showDecimal = (e) => {
    setDecimal("" + parseInt(binary.join(""), 2));
    e.preventDefault();
  };
  return (
    <div className="App">
      <header className="App-header">
        <form className={"form"}>
          <div>
            <input type="checkbox" onChange={(e, b) => isToggled(0, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(1, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(2, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(3, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(4, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(5, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(6, b)} />
            <input type="checkbox" onChange={(e, b) => isToggled(7, b)} />
          </div>
          <div>
            <input
              name="binary"
              type="text"
              value={binary}
              onChange={binary.join("")}
            />
          </div>
          <div>
            <button onClick={showDecimal}>Convert</button>
          </div>
          <div>
            <input type="text" value={decimal} />
          </div>
        </form>
      </header>
    </div>
  );
}

export default Binary;

import React，{useState}来自“React”；
导入“/App.css”；
函数二进制（）{
const[binary，setBinary]=useState（[0,0,0,0,0,0,0]）；
const[toggle，setToggle]=useState（false）；
const[decimal，setDecimal]=useState（0）；
常量isToggled=（形式）=>{
设置切换（真）；
设bin=binary
.slice（0，表单）
.concat（[切换？1:0]）
.concat（二进制.slice（form+1））；
挫折（bin）；
};
常量showdecmal=（e）=>{
setDecimal（“+parseInt（binary.join（“”，2））；
e、 预防默认值（）；
};
返回(
isToggled（0，b）}/>
isToggled（1，b）}/>
isToggled（2，b）}/>
isToggled（3，b）}/>
isToggled（4，b）}/>
isToggled（5，b）}/>
isToggled（6，b）}/>
isToggled（7，b）}/>
转换
);
}
导出默认二进制文件；
首先

        <input type="checkbox" onChange={(e, b) => isToggled(0, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(1, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(2, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(3, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(4, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(5, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(6, b)} />
        <input type="checkbox" onChange={(e, b) => isToggled(7, b)} />

isToggled（0，b）}/>
isToggled（1，b）}/>
isToggled（2，b）}/>
isToggled（3，b）}/>
isToggled（4，b）}/>
isToggled（5，b）}/>
isToggled（6，b）}/>
isToggled（7，b）}/>

这是一个非常糟糕的设计。尝试以下方式渲染：

{binary.map((bin,index) => <input key={index} type="checkbox" onChange={(e, b) => isToggled(index, b)} />)}


{binary.map（（bin，index）=>isToggled（index，b）}/>）

由于呈现的元素不依赖于
二进制
状态，因此更新不会反映在组件上，因为状态会发生变化，但呈现的jsx元素没有什么不同

注意：给定
key={index}
在某些情况下会有一些问题，您可以阅读更多的如果您坚持这种结构，我会稍微重构您的代码。我去掉了“toggle”变量，因为您可以直接使用输入字段中的事件。这意味着您的新切换将是输入本身的“选中”状态，该状态为true或false。我对它进行了测试，效果良好

import React, { useState } from "react";

function Binary() {
    const [binary, setBinary] = useState([0, 0, 0, 0, 0, 0, 0, 0]);
    const [decimal, setDecimal] = useState(0);
    const isToggled = (position, value) => {
        let bin = binary
            .slice(0, position)
            .concat([value ? 1 : 0])
            .concat(binary.slice(position + 1));
        console.log(bin)
        setBinary(bin);
    };
    const showDecimal = (e) => {
        setDecimal("" + parseInt(binary.join(""), 2));
        e.preventDefault();
    };
    return (
        <div className="App">
            <header className="App-header">
                <form className={"form"}>
                    <div>
                        <input type="checkbox" onChange={(e => isToggled(0, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(1, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(2, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(3, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(4, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(5, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(6, e.target.checked))} />
                        <input type="checkbox" onChange={(e => isToggled(7, e.target.checked))} />
                    </div>
                    <div>
                        <input
                            name="binary"
                            type="text"
                            value={binary}
                            readOnly
                        />
                    </div>
                    <div>
                        <button onClick={showDecimal}>Convert</button>
                    </div>
                    <div>
                        <input type="text" value={decimal} readOnly />
                    </div>
                </form>
            </header>
        </div>
    );
}

export default Binary;

import React，{useState}来自“React”；
函数二进制（）{
const[binary，setBinary]=useState（[0,0,0,0,0,0,0]）；
const[decimal，setDecimal]=useState（0）；
常量isToggled=（位置、值）=>{
设bin=binary
.切片（0，位置）
.concat（[值？1:0]）
.concat（二进制切片（位置+1））；
控制台日志（bin）
挫折（bin）；
};
常量showdecmal=（e）=>{
setDecimal（“+parseInt（binary.join（“”，2））；
e、 预防默认值（）；
};
返回(
i切换（0，e.target.checked））}/>
i切换（1，e.target.checked））}/>
i切换（2，e.target.checked））}/>
i切换（3，e.target.checked））}/>
i切换（4，e.target.checked））}/>
i切换（5，e.target.checked））}/>
i切换（6，e.target.checked））}/>
i切换（7，e.target.checked））}/>
转换
);
}
导出默认二进制文件；