reactjs - 为活动按钮 ReactJS 添加一个类

Question

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

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;

标签： reactjs

Answer 1

您正在设置 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>
    )
}