classNameがdivの外をクリックすると削除されます

Question

次のコードがあります。デフォルトでは、パトリオットはbtn-原色を青色にし、パッカーはデフォルトの色を白色にします。 2つのボタンの間で選択すると色が変わりますが、divの外側をクリックすると両方のボタンが白に変わります。本当にありがとうございます。私は絶対初心者です。

class something { 
    constructor(props) { 
     super(props); 
     this.state = { 
     clicked: false 
     }; 
    } 

    toggleView() { 
     this.setState({ 
     clicked: true 
     }); 
    } 
    render() { 
     var classRender = "btn-primary"; 
     classRender = this.state.clicked ? "btn-primary" : "btn-primary selected "; 
     return (
     <div> 
      <button 
      className={classRender} 
      type="button" 
      onClick={e => this.toggleView()} 
      > 
      Patriots 
      </button> 
      <button 
      className="btn-primary" 
      type="button" 
      onClick={e => this.toggleView()} 
      > 
      Packers{" "} 
      </button> 
     </div> 
    ); 
    } 
    } 

Answer 1

それはselectedクラスonClickでボタンを更新しますし、ちょっと

export default class Toggle extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      patriotsSelected : true 
     } 

     this.patriotsSelected = this.patriotsSelected.bind(this); 
     this.packersSelected = this.packersSelected.bind(this); 
    } 

    patriotsSelected(){ 
     this.setState({patriotsSelected : true}) 
    } 

    packersSelected(){ 
     this.setState({patriotsSelected : false}) 
    } 



    render() { 
     var patriotsClass = this.state.patriotsSelected ? "btn-primary selected" : "btn-primary"; 
     var packersClass = this.state.patriotsSelected ? "btn-primary" : "btn-primary selected"; 
     return (
      <div> 
       <button className={patriotsClass} onClick={this.patriotsSelected} > 
        Patriots 
       </button> 
       <button className={packersClass} onClick={this.packersSelected} > 
        packers 
       </button> 
      </div> 
     ); 
    } 
} 

Answer 2

だから何が起こっていることは、あなたがパッカーズボタンをクリックした場合でも「this.state.clicked」のあなたの割り当てはtoggleView方法であいまいであるため、ペイトリオッツボタンはまだ、それがクリックさだと思っています。

class something { 
    constructor(props) { 
    super(props); 
    this.state = { 
     clicked: null 
    }; 
    } 

    toggleView(team) { 
    this.setState({ 
     clicked: team 
    }); 
    } 

    buttonClass(team) { 
    var clicked = this.state.clicked; 
    return (team === clicked ? "btn-primary" : "btn-primary selected "); 
    } 

    render() { 
    return (
     <div> 
     <button 
      className={this.buttonClass('Patriots')} 
      type="button" 
      onClick={e => this.toggleView('Patriots')} 
     > 
      Patriots 
      </button> 
     <button 
      className={this.buttonClass('Packers')} 
      type="button" 
      onClick={e => this.toggleView('Packers')} 
     > 
      Packers{" "} 
     </button> 
     </div> 
    ); 
    } 
}