Reactjs 在react.js中切换类div元素

嗨，我是Reactjs的新手

我试图使每个不同的切换div类时，点击按钮

import React from 'react';

class Home extends React.Component{
  
  state = { isActive: false }; 
  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });
  }; 

  render(){  
    const isActive = this.state.isActive; 

    return (
      <>
        <button onClick={this.handleToggle} className={isActive ? "btn1" : "btn-on1"}>Toggle class1</button>
        <div className={isActive ? "box1" : "box-active1"}>11</div>
        <br />
        <button onClick={this.handleToggle} className={isActive ? "btn2" : "btn-on2"}>Toggle class2</button>
        <div className={isActive ? "box2" : "box-active2"}>22</div>
      </>
    )
  }
}
  
export default Home;

从“React”导入React；
类Home扩展了React.Component{
状态={isActive:false}；
handleToggle=（）=>{
this.setState（{isActive:！this.state.isActive}）；
}; 
render（）{
const isActive=this.state.isActive；
返回(
切换类别1
11


切换类别2
22
)
}
}
导出默认主页；

问题是单击按钮时，两个按钮同时切换。 我想让他们每个按钮只切换自己

---

如何修复它？

我认为可以通过将状态从布尔值更改为可以引用特定div来实现这一点：

state = { isActive: '' }; 
  handleToggle = (btn) => {
    this.setState({ isActive: btn });
  }; 

  render(){  
    const isActive = this.state.isActive; 

    return (
      <>
        <button onClick={() => this.handleToggle('button1')} className={isActive === 'button1' ? "btn1" : "btn-on1"}>Toggle class1</button>
        <div className={isActive === 'button1' ? "box1" : "box-active1"}>11</div>
        <br />
        <button onClick={() => this.handleToggle('button2')} className={isActive === 'button2' ? "btn2" : "btn-on2"}>Toggle class2</button>
        <div className={isActive === 'button2' ? "box2" : "box-active2"}>22</div>
      </>
    )
  }

state={isActive:'}；
handleToggle=（btn）=>{
this.setState（{isActive:btn}）；
}; 
render（）{
const isActive=this.state.isActive；
返回(
this.handleToggle（'button1'）}className={isActive===='button1'？“btn1”：“btn-on1”}>切换类1
11


this.handleToggle（'button2'）}className={isActive===='button2'？“btn2”：“btn-on2”}>切换类2
22
)
}

我认为可以通过将状态从布尔值更改为可以引用特定div来实现这一点：

state = { isActive: '' }; 
  handleToggle = (btn) => {
    this.setState({ isActive: btn });
  }; 

  render(){  
    const isActive = this.state.isActive; 

    return (
      <>
        <button onClick={() => this.handleToggle('button1')} className={isActive === 'button1' ? "btn1" : "btn-on1"}>Toggle class1</button>
        <div className={isActive === 'button1' ? "box1" : "box-active1"}>11</div>
        <br />
        <button onClick={() => this.handleToggle('button2')} className={isActive === 'button2' ? "btn2" : "btn-on2"}>Toggle class2</button>
        <div className={isActive === 'button2' ? "box2" : "box-active2"}>22</div>
      </>
    )
  }

state={isActive:'}；
handleToggle=（btn）=>{
this.setState（{isActive:btn}）；
}; 
render（）{
const isActive=this.state.isActive；
返回(
this.handleToggle（'button1'）}className={isActive===='button1'？“btn1”：“btn-on1”}>切换类1
11


this.handleToggle（'button2'）}className={isActive===='button2'？“btn2”：“btn-on2”}>切换类2
22
)
}

你说的“不好用”是什么意思？你面临的问题是什么，什么不好用？@Nithish我想让它们每个按钮都只自己切换。如果你有多个东西需要自己的状态，那么每个东西都需要自己的状态；一个状态值是不够的。哦，你只是在两个状态之间切换？你说的“工作不好”是什么意思？你面临的问题是什么，什么工作不好？@Nithish我想让它们每个按钮只切换自己。如果你有多个需要自己状态的东西，那么每个东西都需要自己的状态；一个状态值是不够的。哦，你只是在两个状态之间切换？