反应切换 ID

Question

我在切换 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;

Answer 1

您需要为 setState 使用更新程序功能

this.setState((prevSate) => {
        let toggleItem = prevState[toggleId];
        return {
          [toggleId]: !toggleItem,
        }
      });

Answer 2

在 toggleOpen() 中，您需要将 const id = e.target.id; 更改为 const id = e.currentTarget.id

在这里查看修改后的代码

详细了解 e.target 和 e.currentTarget in the official documentation

之间的区别

反应切换 ID

React Toggle ID

javascript

toggle

reactjs