javascript - 在 react 中显示/隐藏特定的

Question

React 和 javascript 的初学者，我被这个问题困住了:

当我点击他的专用快门按钮时，如何显示/隐藏特定的 div？

这是我的想法，但如您所见，当我单击“打开”或“关闭”链接时，它只会影响每个 div。

import React from 'react'

class Qui extends React.Component {

    constructor(props) {
      super(props);
      this.state = { isToggleOn: true };
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
      }));
    }

    render() {
      return(
        <div>

          <h1>first part</h1>
          <a onClick={this.handleClick> 
            {this.state.isToggleOn ? 'open' : 'close'}
          </a>
          <div className={this.state.isToggleOn ? 'hidden':'visible'}>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
          </div>

          <h1>second part</h1>
          <a onClick={this.handleClick> 
            {this.state.isToggleOn ? 'open' : 'close'}
          </a>
          <div className={this.state.isToggleOn ? 'hidden':'visible'}>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
          </div>

        </div>
      )
    }
  }

感谢您帮助我 :)。

Answer 1

可以在状态中设置activeDivIndex，然后根据activeDivIndex值显示div。

  state = {
    activeDivIndex: 0
  };

  handleClick = index => {
    this.setState({ activeDivIndex: index });
  };

  render() {
    return (
      <div>
        <h1>first part</h1>
        <a onClick={() => this.handleClick(0)}>
          {this.state.activeDivIndex === 0 ? "open" : "close"}
        </a>
        {this.state.activeDivIndex === 0 && (
          <div>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
          </div>
        )}
        <h1>second part</h1>
        <a onClick={() => this.handleClick(1)}>
          {this.state.activeDivIndex === 1 ? "open" : "close"}
        </a>
        {this.state.activeDivIndex === 1 && (
          <div>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
          </div>
        )}
      </div>
    );
  }

您可以在 codesandbox here 中实时查看它.