Javascript 反应切换ID

我对切换div有一个问题。这可能是一件小事，但我找不到它在我第一次单击它（面板展开）时起作用的原因，但当再次单击它时，它不会关闭。也许有人能理解为什么我第二次点击这个项目时，id没有和元素“e”一起发送？非常感谢

class FlexPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toggle1: false,
      toggle2: false,
      toggle3: false,
    };
  }
  render() {
    const toggleOpen = (e) => {
      const id = e.target.id;
      const toggleId = `toggle${id}`;
      let toggleItem = this.state[toggleId];
      this.setState({
        [toggleId]: !toggleItem,
      });
    };

    const { toggle1, toggle2, toggle3 } = this.state;
    console.log(toggle1);
    return (
      <div className="panels">
        <div
          id={1}
          className={`panel panel1 ${toggle1 ? "open open-active" : "closed"} `}
          onClick={(e) => {
            toggleOpen(e);
          }}
        >
          <p>Consultes</p>
          <p>Teràpies</p>
          <p>Recolzament</p>
        </div>
        <div
          id={2}
          className={`panel panel2 ${toggle2 ? "open open-active" : "closed"} `}
          onClick={(e) => {
            toggleOpen(e);
          }}
        >
          <p>Videoconsultes</p>
          <p>en grup</p>
          <p>i individuals</p>
        </div>
        <div
          id={3}
          className={`panel panel3 ${toggle3 ? "open open-active" : "closed"} `}
          onClick={(e) => {
            toggleOpen(e);
          }}
        >
          <p>Jordi</p>
          <p>Arjó</p>
          <p>Teràpies</p>
        </div>
      </div>
    );
  }
}

export default FlexPanel;

类FlexPanel扩展组件{
建造师（道具）{
超级（道具）；
此.state={
切换1：错误，
切换2：错误，
切换3：错误，
};
}
render（）{
常量开关打开=（e）=>{
const id=e.target.id；
const toggleId=`toggle${id}`；
让toggleItem=this.state[toggleId]；
这是我的国家({
[toggleId]：！toggleItem，
});
};
const{toggle1，toggle2，toggle3}=this.state；
console.log（切换1）；
返回(
{
开关打开（e）；
}}
>
咨询

馅饼

回忆

{
开关打开（e）；
}}
>
视频咨询

狼吞虎咽

我个人

{
开关打开（e）；
}}
>
乔迪

阿尔乔夫

馅饼

);
}
}
导出默认FlexPanel；

您需要为

设置状态使用更新程序功能

this.setState（（prevSate）=>{
让toggleItem=prevState[toggleId]；
返回{
[toggleId]：！toggleItem，
}
});
在
toggleOpen（）
中，您需要更改
const id=e.target.id
to
const id=e.currentTarget.id

在这里查看修改后的代码


更多关于
e.target
和
e.currentTarget
@carlosdellríof rancés之间区别的信息没有问题。我已经用链接更新了答案。您可以尝试
console.log
You
e
或
e.target
或
e.currentTarget
查看实际命中的目标