Javascript 如何使用react中的按钮切换带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} 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，更正后，代码运行良好。

工作示例：

您正在使用onclick而不是onclick-in按钮：

完整工作源代码：

从React导入React； 导入./style.css； 类Home扩展了React.Component{ 建造师{ 超级的 此.state={ showdiv1:false， showdiv2：错误 }; this.togglediv=this.togglediv.bindthis； } 切换DivDiv_名称{ 交换机分区名称{ 案例展示1： this.setState{showdiv1:！this.state.showdiv1}； 打破 案例2： this.setState{showdiv2:！this.state.showdiv2}； 打破 } } 渲染{ const{showdiv1，showdiv2}=this.state； 回来 this.toggledivshowdiv1} > this.toggledivshowdiv2} > {/*隐藏div*/} {showdiv1&&Hey伙计！} {showdiv2&&Hey woman！} {/*隐藏div*/} ; } } 导出默认主页； 工作示例：

您正在使用onclick而不是onclick-in按钮：

完整工作源代码：

从React导入React； 导入./style.css； 类Home扩展了React.Component{ 建造师{ 超级的 此.state={ showdiv1:false， showdiv2：错误 }; this.togglediv=this.togglediv.bindthis； } 切换DivDiv_名称{ 交换机分区名称{ 案例展示1： this.setState{showdiv1:！this.state.showdiv1}； 打破 案例2： this.setState{showdiv2:！this.state.showdiv2}； 打破 } } 渲染{ const{showdiv1，showdiv2}=this.state； 回来 this.toggledivshowdiv1} > this.toggledivshowdiv2} > {/*隐藏div*/} {showdiv1&&Hey伙计！} {showdiv2&&Hey woman！} {/*隐藏div*/} ; } } 导出默认主页； 除了事件名称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>

类Home扩展了React.Component{ 建造师{ 超级的 this.state={isShowMan:true}； } 切换showmanissshow{ this.setState{isShowMan:isShow}； } 渲染{ const{isShowMan}=this.state； 回来 this.toggleShowMantrue} >歹徒 this.toggleShowManfalse} > 女性身体 {isShowMan&&Hey伙计！} {！isShowMan&&Hey woman！} ; } } ReactDOM.render，document.getElementById'root'； 除了事件名称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>

类Home扩展了React.Component{ 建造师{ 超级的 this.state={isShowMan:true}； } 切换showmanissshow{ this.setState{isShowMan:isShow}； } 渲染{ const{isShowMan}=this.state； 回来 this.toggleShowMantrue} >歹徒 this.toggleShowManfalse} > 女性身体 {isShowMan&&Hey伙计！} {！isShowMan&&Hey woman！} ; } } ReactDOM.render，document.getElementById'root'；

---

可以使用更简洁的方法

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>
        )
  

}

---

可以使用更简洁的方法

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>
        )
  

}

---

为什么要隐藏class=row？您没有重新显示隐藏的行为什么要隐藏class=row？您没有使用函数组件重新显示隐藏的行。但有一件事是舔而不是舔onclick@Phong谢谢：我从问题中复制了代码，但我忘了使用functional component纠正这个错误。但有一件事是舔而不是舔onclick@Phong谢谢：我从问题中复制了代码，但忘了更正typo@Kanchan巴特：这能回答你的问题吗？如果您需要帮助，请告诉我。是的，onClick是代码中的第一个问题。在州里使用showman之后，我的代码现在可以一次显示一个div，这是我想要的。非常感谢你！太棒了，我根据UI/UX^^猜到了！我也在尝试转换代码，这样只有相应的

---

在这种情况下，应在不更改整个div的情况下显示单词，即男性和女性。您能帮助我吗？此外，在状态中仅使用showman时，它将在屏幕上显示hey woman作为默认值。如何解决这个问题？@Kanchan Bharti这能回答你的问题吗？如果您需要帮助，请告诉我。是的，onClick是代码中的第一个问题。在州里使用showman之后，我的代码现在可以一次显示一个div，这是我想要的。非常感谢你！太棒了，我根据UI/UX^^猜到了！我还试图转换代码，以便在不更改整个div的情况下，只显示相应的单词，即本例中的“男”和“女”。您能帮我吗？另外，在状态中仅使用showman时，它将在屏幕上显示“hey woman”作为默认值。如何解决这个问题？