show/hide 一个特定的 <div> 反应

Question

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

当我点击他的专用快门按钮时，我如何show/hide一个特定的div？

这是我的想法，但如您所见，当我单击 "open" 或“关闭”link 时，它只会影响每个 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.

中实时查看

Answer 2

您可以为每个 div 设置一个单独的状态变量，并将其分别用于 show/hide 它们。

例子

class Qui extends React.Component {
  state = {
    showFirstPart: true,
    showSecondPart: true
  };

  toggleFirstPart = () => {
    this.setState(prevState => ({
      showFirstPart: !prevState.showFirstPart
    }));
  };

  toggleSecondPart = () => {
    this.setState(prevState => ({
      showSecondPart: !prevState.showSecondPart
    }));
  };

  render() {
    const { showFirstPart, showSecondPart } = this.state;

    return (
      <div>
        <h1>first part</h1>
        <button onClick={this.toggleFirstPart}>
          {showFirstPart ? "Hide" : "Show"}
        </button>
        {showFirstPart && (
          <div>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
          </div>
        )}

        <h1>second part</h1>
        <button onClick={this.toggleSecondPart}>
          {showSecondPart ? "Hide" : "Show"}
        </button>
        {showSecondPart && (
          <div>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<Qui />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

show/hide 一个特定的 <div> 反应

show/hide a specific <div> in react

javascript

toggle

reactjs