Reactjs 为活动按钮添加一个类

当你点击一个按钮时，你应该改变它的类别。当我单击其中一个按钮时，两个按钮的类都会更改。我只需要将该类添加到活动按钮中，如果我单击另一个按钮，则第一个按钮将使该类消失，第二个按钮将出现。错误在哪里

import React, { Component } from 'react';


class trueName extends Component {
  constructor(props) {
    this.state = {
      name: {},
    };
  }

  editName = (names)=>{
    this.setState({name:names});
  }

  someFunct(name) {
    this.setState({ active: name })
}

render() {
  const {name}=this.state;
    return(
      <div >
        <div className="SelectName">
          <span>{this.state.name}</span>
        </div>

        <button
        className={this.state.active === name ? 'active' : ''}
        onClick={ () => {this.editName(John);this.someFunct(name)}}
        key ='1'>
          <span>My name John</span>
        </button>

        <button
        className={this.state.active === name ? 'active' : ''}
        onClick={ () => {this.editName(Donald);this.someFunct(name)}}
        key ='2'
        >
          <span>My name Donald</span>
        </button>
      </div>

    )
  }
}
export default trueName;

import React，{Component}来自'React'；
类trueName扩展组件{
建造师（道具）{
此.state={
姓名：{}，
};
}
editName=（名称）=>{
this.setState（{name:names}）；
}
someFunct（名称）{
this.setState（{active:name}）
}
render（）{
const{name}=this.state；
返回(
{this.state.name}
{this.editName（John）；this.someFunct（name）}
key='1'>
我叫约翰
{this.editName（Donald）；this.someFunct（name）}
键class='2'
>
我叫唐纳德
)
}
}
导出默认trueName；

您正在设置state.name，然后将state.active设置为相同的值，因此this.state.active==this.state.name始终为true，并应用活动类

这可能有助于：

constructor(props) {
    super(props)
    this.state = {
        name: null
    }
}

editName = name => {
    this.setState({ name: name })
}

render() {
    const { name } = this.state
    return (
        <div>
            <div className="SelectName">
                <span>
                    <pre>{name}</pre>
                </span>
            </div>

            <button
                className={name === "John" ? "active" : ""}
                onClick={() => {
                    this.editName("John")
                }}
            >
                <span>My name John</span>
            </button>

            <button
                className={name === "Donald" ? "active" : ""}
                onClick={() => {
                    this.editName("Donald")
                }}
            >
                <span>My name Donald</span>
            </button>
        </div>
    )
}  

构造函数（道具）{
超级（道具）
此.state={
名称：空
}
}
editName=name=>{
this.setState（{name:name}）
}
render（）{
const{name}=this.state
返回(
{name}
{
此.editName（“约翰”）
}}
>
我叫约翰
{
此.editName（“Donald”）
}}
>
我叫唐纳德
)
}  

您需要将按钮制作成自己的组件，并从中管理其状态。someFunct（名称）-始终设置相同的值