className被移除點擊區域外

Question

我有以下代碼。默認情況下，愛國者將具有藍色的btn-primary顏色，並且打包機將具有白色的默認顏色。顏色在兩個按鈕之間進行選擇時發生變化，但當我在div外單擊時，兩個按鈕都會變爲白色。真的很感謝任何建議。我是一個絕對的初學者btw。

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

我只是測試下面的代碼將與onClickselected類更新按鈕，將繼續選擇，如果點擊之外

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> 
    ); 
    } 
}