如何使用按钮在反应中切换带有 onclick 事件的分区的显示？

Question

我试图在单击相应按钮时显示相应的<div>。基本上我想在单击相应按钮时显示hey man! 和hey woman!。 所以，我有两个这样的按钮：

<div className="row">
  <button className="btn col-6 bg-transparent col-12 col-sm-6" onclick={() => this.togglediv("showdiv1")}  >
    <img className="humanbody profile" src={malebody} />
  </button>
  <button className="btn col-6 bg-transparent col-12 col-sm-6" onclick={() => this.togglediv("showdiv2")}  >
    <img className="humanbody profile" src={femalebody} alt="" />
   </button>
</div>

这里使用以下代码处理 onclick 事件：

class Home extends React.Component {

    constructor() {
        super();
        this.state = {
            showdiv1: false,
            showdiv2: false
        };
        this.togglediv = this.togglediv.bind(this);
    }

    togglediv(div_name) {
        switch (div_name) {
            case "showdiv1":
                this.setState({ showdiv1: !this.state.showdiv1 });
                break;
            case "showdiv2":
                this.setState({ showdiv2: !this.state.showdiv2 });
                break;
        }
    }

    render() {

        const { showdiv1, showdiv2 } = this.state;

        return (
            <div className="container py-5">

                <div className="row">
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onclick={() => this.togglediv("showdiv1")}  >
                        <img className="humanbody profile" src={malebody} />
                    </button>
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onclick={() => this.togglediv("showdiv2")}  >
                        <img className="humanbody profile" src={femalebody} />
                    </button>
                </div>

                
                {/* Hidden div */}
                <div className="row">
                    {
                        showdiv1 && (
                            <div>
                                Hey man!
                            </div>
                        )
                    }
                    {
                        showdiv2 && (
                            <div>
                                Hey woman!
                            </div>
                        )
                    }
                </div>
                {/* Hidden div */}
            </div>
        )
    }
}

export default Home;

点击按钮时隐藏的分区不会出现在屏幕上。

编辑：我错误地在代码中写了onlcick 代替了onClick，在更正后，它工作正常。

Answer 1

工作示例：Stackblitz

您在button 中使用onclick 而不是onClick：

<div className="row">
    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.togglediv("showdiv1")}  >
        <img className="humanbody profile" src={malebody} />
    </button>
    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.togglediv("showdiv2")}  >
        <img className="humanbody profile" src={femalebody} />
    </button>
</div>

完整的工作源代码：

import React from "react";
import "./style.css";

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      showdiv1: false,
      showdiv2: false
    };
    this.togglediv = this.togglediv.bind(this);
  }

  togglediv(div_name) {
    switch (div_name) {
      case "showdiv1":
        this.setState({ showdiv1: !this.state.showdiv1 });
        break;
      case "showdiv2":
        this.setState({ showdiv2: !this.state.showdiv2 });
        break;
    }
  }

  render() {
    const { showdiv1, showdiv2 } = this.state;

    return (
      <div className="container py-5">
        <div className="row">
          <button
            className="btn col-6 bg-transparent col-12 col-sm-6"
            onClick={() => this.togglediv("showdiv1")}
          >
            <img
              className="humanbody profile"
              src={"https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}
            />
          </button>
          <button
            className="btn col-6 bg-transparent col-12 col-sm-6"
            onClick={() => this.togglediv("showdiv2")}
          >
            <img
              className="humanbody profile"
              src={"https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}
            />
          </button>
        </div>

        {/* Hidden div */}
        <div className="row">
          {showdiv1 && <div>Hey man!</div>}
          {showdiv2 && <div>Hey woman!</div>}
        </div>
        {/* Hidden div */}
      </div>
    );
  }
}

export default Home;

Answer 2

除了事件名称onClick 而不是onclick。

另一种方法，只使用一个名为 isShowMan 的状态，然后正确切换它以防您一次只需要显示一个 div。

  toggleShowMan(isShow) {
    this.setState({ isShowMan: isShow });
  }
  ...................................
  <button className="btn col-6 bg-transparent col-12 col-sm-6"
  onClick={() => this.toggleShowHide(true)}>malebody </button>


  ..................Show/Hide propertly................
    <div className="row">
      {isShowMan && <div>Hey man!</div>}
      {!isShowMan && <div>Hey woman!</div>}
    </div>

class Home extends React.Component {
    constructor() {
    super();
    this.state = { isShowMan: true };
  }

  toggleShowMan(isShow) {
    this.setState({ isShowMan: isShow });
  }

  render() {
    const { isShowMan } = this.state;

    return (
      <div className="container py-5">
        <div className="row">
          <button disabled={isShowMan}
            className="btn col-6 bg-transparent col-12 col-sm-6"
            onClick={() => this.toggleShowMan(true)}
          >malebody </button>
          <button disabled={!isShowMan}
            className="btn col-6 bg-transparent col-12 col-sm-6"
            onClick={() => this.toggleShowMan(false)}
          >
            femalebody
          </button>
        </div>

        <div className="row">
          {isShowMan && <div>Hey man!</div>}
          {!isShowMan && <div>Hey woman!</div>}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Home />, document.getElementById('root'));

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

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

Answer 3

更简洁的方法可以是

const MALE = 'MALE'
const FEMALE = 'FEMALE'
export const Home =  () => {
  const [visible, setVisible] = useState(null)
  const isMale = visible === MALE
  const isFemale = visible === FEMALE

  (
            <div className="container py-5">

                <div className="row">
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => setVisible(MALE)}  >
                        <img className="humanbody profile" src={malebody} />
                    </button>
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => setVisible(FEMALE)}  >
                        <img className="humanbody profile" src={femalebody} />
                    </button>
                </div>

                
                {/* Hidden div */}
                <div className="row">
                    {
                        isMale && (
                            <div>
                                Hey man!
                            </div>
                        )
                    }
                    {
                        isFemale && (
                            <div>
                                Hey woman!
                            </div>
                        )
                    }
                </div>
                {/* Hidden div */}
            </div>
        )
  

}