0

При нажатии на одну из двух кнопок отображается имя. Как заставить активную кнопку изменять свой цвет и высоту текста, пока не будет нажата другая кнопка? Я думал сделать это через: active (CSS), но он работает только при нажатии и сразу же стиль становится тем же.

import React, { Component } from 'react';
class trueName extends Component {
constructor(props) {
this.state = {
  name: {},
};
} 

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

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

    <button
    onClick={ () => this.editName(John)}>
      <span>My name John</span>
    </button>

    <button
    onClick={ () => this.editName(Donald)}
    >
      <span>My name Donald</span>
    </button>
  </div>

)}}

export default trueName;

1
  • Вам бы помог один гугл запрос "reactjs add active class", нашлось это — stackoverflow.com/questions/38980051/… ) [но суда по приведенному коду, на чистом JS это повторить было бы не сложнее] 27 апр 2019 в 3:07

1 ответ 1

1

Не проще ли было, в state указать название class.

constructor(props) {
this.state = {
  name: {},
  defaultClass: "SelectName"
};

Использовать не

 <div className="SelectName">

а

 <div className={this.state.defaultClass}>

Тогда при onClick можно легко заменить этот className

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.