Реагировать на активный стиль кнопки - PullRequest
Новая
       15

Реагировать на активный стиль кнопки

0 голосов
/ 02 мая 2018

Я новичок в разработке React и пользовательского интерфейса, пожалуйста, потерпите меня. У меня есть список кнопок, и я пытаюсь установить другой значок изображения, когда кнопка активна, и когда я нажимаю на другую кнопку, вторая кнопка должна быть активной, а первая - деактивированной и т. Д.

Вот мой код: 

export class ABC extends Component {
    configFile = require('../../resources/stubs/config.json')

    constructor(props) {
        super(props);
        this.state = {
            cSelected: [],
            isHidden: true,
            level: this.configFile.Level,
            amount: this.configFile.amount,
            des1: this.configFile.desc1,
            des2: this.configFile.desc2,
            des3: this.configFile.desc3,

        }
        this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
    };

    onRadioBtnClick(cSelected, aSelected, d1, d2, d3) {
        this.setState({
             cSelected,
             aSelected,
             d1,
             d2,
             d3
       });
    }



    render(){
        return (
          <div>
            <ButtonGroup>
                <Button className="circleIcon" 
                        onClick={() => this.onRadioBtnClick(this.state.level, this.state.amount, this.state.des1, this.state.des2, this.state.des3, )} 
                        active={this.state.cSelected === 1}><img src={incirclePurple}  
                        alt="profile-tab-icon" />|<span className="numberCircle">1</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle2", "$1,000-$2,499", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 2}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">2</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle3", "$2,500-$4,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 3}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">3</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle4", "$5,000-$9,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 4}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">4</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle5", "$10,000-$34,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 5}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">5</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle6", "$35,000-$74,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 6}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">6</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("President's Circle", ">$74,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 7}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">7</span></Button>
                <Button className="circleIcon" onClick={() => this.onRadioBtnClick("Chairman's Circle", ">$74,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 8}><img src={incirclePurple}  alt="profile-tab-icon" />|<span className="numberCircle">8</span></Button>
            </ButtonGroup>   
            <div>
                <p>{this.state.cSelected}{this.state.aSelected}</p>
                <ul>
                    <li>{this.state.d1}</li>
                    <li>{this.state.d2}</li>
                    <li>{this.state.d3}</li>
                </ul>
            </div> 
        </div>) 
    }
}

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Я понял !!

Заполняет значение activeName через id

Спасибо !!

0 голосов
/ 02 мая 2018

Вы можете дать уникальную name опору для каждой кнопки и создать состояние activeButton, которое будет принимать значение имени активированной кнопки: 

handleActiveButton(e) {
  e.preventDefault();

  const activeName = e.target.name;
  this.setState({ activeName });
}

Тогда в className опоре ваших кнопок вы можете сделать что-то вроде className={ this.state.activeName === 'button1' ? 'active' : '' }

Где button1 - имя кнопки, а active - ваш класс CSS для отображения значка вашего изображения.

...