响应切换 ID

Question

我有一个切换潜水的问题。这可能是一件小事，但是当我第一次单击它（并且面板展开）时，我找不到它起作用的原因，但是当再次单击时，它不会关闭。也许有人可以理解为什么我第二次点击该项目时，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

在你需要改变toggleOpen()const id = e.target.id;const id = e.currentTarget.id在此处查看修改后的代码https://codesandbox.io/s/awesome-jennings-pl2yw?fontsize=14&hidenavigation=1&theme=dark有关 和 之间的区别的更多信息，请参阅官方文档e.targete.currentTarget