无法阅读其他部分

Question

我希望我的 div 选中/取消选中。 但是，其他部分无法读取我的代码（未定义） 请帮帮我...

（第一次点击没问题 第二次点击未定义）

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

const Blocking = () => {
  const [checked, setChecked] = useState([false, false, false, false, false]);

  const onCheck = (e) => {
    e.preventDefault();
    console.log(e.target.getAttribute("name"));
    if (checked[e.currentTarget.getAttribute("name")] === false) {
      e.target.style.background = "aquamarine";
      setChecked(!checked[e.target.getAttribute("name")]);
      console.log("if " + checked[e.target.getAttribute("name")]);
    } else {
      e.target.style.background = "white";
      setChecked(!checked[e.target.getAttribute("name")]);
      console.log("else " + checked[e.target.getAttribute("name")]);
    }
  };

  return (
    <div className="container">
      <div className="items" name="0" onClick={onCheck}>
        1
      </div>
      <div className="items" name="1" onClick={onCheck}>
        2
      </div>
      <div className="items" name="2" onClick={onCheck}>
        3
      </div>
      <div className="items" name="3" onClick={onCheck}>
        4
      </div>
      <div className="items" name="4" onClick={onCheck}>
        5
      </div>
    </div>
  );
};

export default Blocking;

下面的代码块是 chrome 中的 console.log)

[HMR] Waiting for update signal from WDS...
Blocking.jsx:9 2
Blocking.jsx:14 if false
Blocking.jsx:9 2
Blocking.jsx:18 else undefined

首先，我单击任何块，然后打印正常。 第二，我点击任何块，然后打印未定义。

Answer 1

错误在于：

setChecked(!checked[e.target.getAttribute("name")]);

“checked”数组被一个布尔值替换。

你可以这样做：

let newChecked = [...checked];                     //Destructure
let index = e.currentTarget.getAttribute("name")   //Get index
newChecked[index] = !checked[index]                //Toggle check

setChecked(newChecked)

Answer 2

问题

您正在改变 checked 状态数组。 setChecked(!checked[e.target.getAttribute("name")]); 将状态更改为单个布尔值，因此后续 checked[e.currentTarget.getAttribute("name")] 条件测试可能总是为假。

您也直接操作 DOM。这是 React 中的一种反模式。

您需要浅拷贝整个数组并更新特定索引。使用状态值导出背景颜色。

const onCheck = (e) => {
  e.preventDefault();
  const index = Number(e.currentTarget.getAttribute("name"));
  setChecked(checked => checked.map((val, i) => i === index ? !val : val));
};

return (
  <div className="container">
    <div
      className="items"
      style={{ background: checked[0] ? 'white' : 'aquamarine' }}
      name="0"
      onClick={onCheck}
    >
      1
    </div>
    ...etc
  </div>
);