मुझे समूह में दो बटन मिले। किसी भी बटन को दबाने से वह सक्रिय हो जाता है और दूसरा निष्क्रिय हो जाता है। पहले बूट अप के दौरान कोई भी बटन दबाया नहीं जाता है। अब जब कोई एक बटन दबाया जाता है तो दोनों बटन सक्रिय हो जाते हैं। क्या कोई इसे ठीक करने में मदद कर सकता है?

import cn from 'classnames';
import React from 'react';

class BtnGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }

  onChangeClass = () => {
    const active = this.state.active;
    this.setState({ active: !active });
  };

  render() {
    const btnClass = cn({
      'active': this.state.active,
    });
    return ( 
      <div className="btn-group" role="group">
        <button type="button" className={`btn btn-secondary left ${btnClass}`} onClick={this.onChangeClass}>Left</button>
        <button type="button" className={`btn btn-secondary right ${btnClass}`} onClick={this.onChangeClass}>Right</button>
      </div>
    );
  }
}
0
Lex27 30 मार्च 2020, 18:22

1 उत्तर

सबसे बढ़िया उत्तर

आपको यह अंतर करना होगा कि आप किस बटन पर क्लिक कर रहे हैं:

  onChangeClass = type => () => {
    this.setState({ active: type });
  };

और फिर रेंडर में:

  render() {
    return ( 
      <div className="btn-group" role="group">
        <button type="button" className={`btn btn-secondary left ${cn({
      'active': this.state.active === 'left',
    })}`} onClick={this.onChangeClass('left')}>Left</button>
        <button type="button" className={`btn btn-secondary right ${cn({
      'active': this.state.active === 'right',
    })}`} onClick={this.onChangeClass('right')}>Right</button>
      </div>
    );
  }
2
tudor.gergely 30 मार्च 2020, 15:26