Reactjs 添加&；移除React中按钮上的类

我是新来的，所以这个问题听起来有点像，但我想不出来。所以我有两个按钮，我想在单击其中一个按钮时为它们添加类。所以按钮必须是默认的className=“button”，其中一个单击的按钮应该添加到单击的按钮“selected button”类中。此外，当点击按钮1时，应从按钮2中删除“选定按钮”。有时候我真的是个新手，简单的事情可能会让人困惑，谢谢你的帮助

import React, { Component } from "react";
import { Form } from "react-bootstrap";

export class InstantQuote extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }

  toggleClass() {
    const currentState = this.state.active;
    this.setState({ active: !currentState });
  }

  render() {
    const handleSubmit = (e) => {
      e.preventDefault();
    };
    return (
      <Form className="instantquote shadow p-3 mb-5" onSubmit={handleSubmit}>
        <Form.Group controlId="formGroupFrom">
          <div className="selectable-buttons">
            <button type="submit"
            className={((this.state.active) ? "button button-selected": "button")}
            onClick={ () => this.setState({active: !this.state.active}) }>
              Button1
            </button>
            <button type="submit"
            className={((this.state.active) ? "button button-selected": "button")}
            onClick={ () => this.setState({active: !this.state.active}) }>
              Button2
            </button>
          </div>
        </Form.Group>
      </Form>
    );
  }
}

export default InstantQuote;

import React，{Component}来自“React”；
从“react bootstrap”导入{Form}；
导出类InstantQuote扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动：错误，
};
}
toggleClass（）{
const currentState=this.state.active；
this.setState（{active:！currentState}）；
}
render（）{
常量handleSubmit=（e）=>{
e、 预防默认值（）；
};
返回(
this.setState（{active:！this.state.active}）}>
按钮1
this.setState（{active:！this.state.active}）}>
按钮2
);
}
}
导出默认InstantQuote；

将

active

状态变量更改为

activeButton

，该变量保存激活按钮的标识符（例如名称）。如果单击已激活的按钮，则将

activeButton

设置为空字符串

    this.state = {
       activeButton: ""
    }

    const onButtonClick = (buttonName) => 
        setState({...this.state, 
                  activeButton: this.state.activeButtonn === buttonName 
                                ? "" 
                                : buttonName);
    
    render(){
       ...
       <button 
           type="submit"
           className={'button'+ this.state.activeButton === "Button1" && ' button-selected'}
           onClick={ () => onButtonClick("Button1") }>
              Button1
       </button>
       <button type="submit"
           className={'button'+ this.state.activeButton === "Button2" && ' button-selected'}
           onClick={ () => onButtonClick("Button2") }>
              Button2
       </button>
    ...
}

this.state={
活动按钮：“
}
const onButtonClick=（buttonName）=>
setState（{…this.state，
activeButton:this.state.activeButtonn===buttonName
? "" 
：按钮名称）；
render（）{
...
onButtonClick（“Button1”）}>
按钮1
onButtonClick（“Button2”）}>
按钮2
...
}

将

active

状态变量更改为

activeButton

，该变量保存激活按钮的标识符（例如名称）。如果单击已激活的按钮，则将

activeButton

设置为空字符串

    this.state = {
       activeButton: ""
    }

    const onButtonClick = (buttonName) => 
        setState({...this.state, 
                  activeButton: this.state.activeButtonn === buttonName 
                                ? "" 
                                : buttonName);
    
    render(){
       ...
       <button 
           type="submit"
           className={'button'+ this.state.activeButton === "Button1" && ' button-selected'}
           onClick={ () => onButtonClick("Button1") }>
              Button1
       </button>
       <button type="submit"
           className={'button'+ this.state.activeButton === "Button2" && ' button-selected'}
           onClick={ () => onButtonClick("Button2") }>
              Button2
       </button>
    ...
}

this.state={
活动按钮：“
}
const onButtonClick=（buttonName）=>
setState（{…this.state，
activeButton:this.state.activeButtonn===buttonName
? "" 
：按钮名称）；
render（）{
...
onButtonClick（“Button1”）}>
按钮1
onButtonClick（“Button2”）}>
按钮2
...
}

您无法识别哪个按钮处于活动状态，我建议为每个按钮指定一个唯一的标识符，并跟踪组件状态下的活动按钮。下面是按钮的声明方式

this.state = {
  active: ""
}

...
<button
  id="button1"
  className={`button ${this.state.active === "button1" ? "button-selected" : ""}`}
  onClick={ () => this.setState({active: "button1"}) }>
   Button1
</button>

this.state={
活动：“”
}
...
this.setState（{active:“button1”}）}>
按钮1

如果组件需要数量可变的按钮，请事先声明信息

const buttons = [{label: "Button1", id: "button1"}, ...];
...
buttons.map(button => 
    <button
      id={button.id}
      className={`button ${this.state.active === button.id ? "button-selected" : ""}`}
      onClick={ () => this.setState({active: button.id}) }>
       {button.label}
    </button>
)

const buttons=[{label:“Button1”，id:“Button1”}，…]；
...
buttons.map（按钮=>
this.setState（{active:button.id}）}>
{button.label}
)

您无法识别哪个按钮处于活动状态，我建议为每个按钮指定一个唯一的标识符，并跟踪组件状态下的活动按钮。下面是按钮的声明方式

this.state = {
  active: ""
}

...
<button
  id="button1"
  className={`button ${this.state.active === "button1" ? "button-selected" : ""}`}
  onClick={ () => this.setState({active: "button1"}) }>
   Button1
</button>

this.state={
活动：“”
}
...
this.setState（{active:“button1”}）}>
按钮1

如果组件需要数量可变的按钮，请事先声明信息

const buttons = [{label: "Button1", id: "button1"}, ...];
...
buttons.map(button => 
    <button
      id={button.id}
      className={`button ${this.state.active === button.id ? "button-selected" : ""}`}
      onClick={ () => this.setState({active: button.id}) }>
       {button.label}
    </button>
)

const buttons=[{label:“Button1”，id:“Button1”}，…]；
...
buttons.map（按钮=>
this.setState（{active:button.id}）}>
{button.label}
)

您可以尝试classnames软件包。代码中的一个问题是在类“button”和“button selected”之间没有添加任何空格，这意味着当active为true时，类名为“buttonbutton selected”，我可以像这样修复单击的问题：this.setState（{active:！this.state.active}）}>Button1但我仍然不知道如何在类被单击到另一个按钮时删除该类如果在代码库=>中经常遇到动态clas名称分配，那么npm包将是一个很好的选择。您可以尝试classnames包。代码中的一个问题是在类“button”和“button selected”之间没有添加任何空格，这意味着当active为true时，类名为“buttonbutton selected”，我可以像这样修复单击的问题：this.setState（{active:！this.state.active}）}>Button1但我仍然不知道如何在类被单击到另一个按钮时删除该类如果在代码库=>中经常遇到动态clas名称分配，那么这个npm包将是一个很好的选择。