classNamesを操作してreactjsのクリックを処理する方が改善されました

Question

ReactとJSXの新機能、クラスを操作してクリックイベントをより効率的に、または効率的に処理する方法を私は考えています。私は2つのコンポーネント（そのうちの1つはかなり大きくなっています）を作成しています-Greatlakes & InfoSide。 Greatlakesコンポーネントでは、グラフの中のいくつかの要素をクリックして、それらの要素に一連の異なる要素を追加しようとしています。私はここで動作するコンポーネントを持っていますが、州のブール値で膨らんだ状態になり、render（）のif/elseステートメントのクラスを決定します。

次は、このGreatlakesコンポーネントをいくつかの子コンポーネントに分解し、子クリックイベントが親の状態に影響を与える方法を探していきます。ガイダンスは非常に役に立ちます。

import React from 'react' 
import InfoSide from 'js/modules/InfoSide' 

import 'stylesheets/modules/greatlakes.scss' 

export default React.createClass({ 
    getInitialState:function(){ 
     return{ 
      clicked: false, 
      keyClicked: false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      federalClicked: false, 
      fedSectionClicked: false, 
      aquaSectionClicked: false, 
      polSectionClicked: false, 
      glriClicked: false, 
      glcClicked: false, 
      allianceClicked: false, 
      nwfClicked: false 
     }; 
    }, 
    handleAquaClick: function(){ 
     if(!this.state.aquaticClicked)this.setState({ 
      clicked: true, 
      aquaticClicked:true, 
      pollutedClicked: false, 
      federalClicked: false, 
      glriClicked: false, 
      fedSectionClicked: false, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({aquaticClicked: false, clicked: false}) 
    }, 
    handlePollutedClick: function(){ 
     if(!this.state.pollutedClicked)this.setState({ 
      clicked: true, 
      pollutedClicked:true, 
      aquaticClicked: false, 
      federalClicked: false, 
      glriClicked: false, 
      fedSectionClicked: false, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({pollutedClicked: false, clicked: false}) 
    }, 
    handleFederalClick: function(){ 
     if(!this.state.federalClicked)this.setState({ 
      clicked: true, 
      federalClicked:true, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: false, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({federalClicked: false, clicked: false}) 
    }, 
    handleGlriClick: function(){ 
     if(!this.state.glriClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: true, 
      fedSectionClicked: true, 
      glcClicked: false, 
      allianceClicked: false 
     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, clicked: false}) 
    }, 
    handleGlcClick: function(){ 
     if(!this.state.glcClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: true, 
      glcClicked: true, 
      allianceClicked: false 
     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, clicked: false}) 
    }, 
    handleAllianceClick: function(){ 
     if(!this.state.allianceClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: true, 
      glcClicked: false, 
      allianceClicked: true, 
      aquaSectionClicked: true, 
      polSectionClicked: true, 

     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, allianceClicked: false, clicked: false}) 
    }, 
    handleNwfClick: function(){ 
     if(!this.state.allianceClicked)this.setState({ 
      clicked: true, 
      federalClicked:false, 
      aquaticClicked: false, 
      pollutedClicked: false, 
      glriClicked: false, 
      fedSectionClicked: true, 
      glcClicked: false, 
      allianceClicked: true, 
      aquaSectionClicked: true, 
      polSectionClicked: true, 
      nwfClicked:true 
     }) 
     else this.setState({federalClicked: false, glriClicked: false, fedSectionClicked: false, glcClicked: false, allianceClicked: false, nwfClicked:false, clicked: false}) 
    }, 
    handleKeyClick: function(){ 
     if(!this.state.keyClicked) this.setState({keyClicked:true}); 
     else this.setState({keyClicked: false}) 
    }, 
    render: function(){ 
     var glContentClick = this.state.clicked ? 'on' : ''; 
     var keyClick = this.state.keyClicked || this.state.allianceClicked || this.state.nwfClicked ? 'on' : ''; 
     var aq = this.state.aquaticClicked ? 'on' : ''; 
     var pol = this.state.pollutedClicked ? 'on' : ''; 
     var fed = this.state.federalClicked ? 'on' : ''; 
     var tierAq = this.state.aquaticClicked || this.state.aquaSectionClicked ? 'tier two on' : 'tier two'; 
     var tierPol = this.state.pollutedClicked || this.state.polSectionClicked ? 'tier two on' : 'tier two'; 
     var tierFed = this.state.federalClicked || this.state.fedSectionClicked ? 'tier two on' : 'tier two'; 
     var glri = this.state.glriClicked ? 'title on' : 'title'; 
     var glc = this.state.glcClicked ? 'title on' : 'title'; 
     var alliance = this.state.allianceClicked ? 'title on' : 'title'; 
     var nwf = this.state.nwfClicked ? 'title on' : 'title'; 

     return(
      <div className='greatlakes view'> 
       <div className={'greatlakes-wrap '+glContentClick}> 
        <section className='intro'> 
         <h2>Great Lakes</h2> 
         <p>The Joyce Foundation seeks to protect and restore the Great Lakes by resolving the most critical basin-wide threats to the region’s water resources. The health and resilience of the Great Lakes may be significantly improved by simultaneously making progress on three interconnected issues: aquatic invasive species; runoff pollution, especially excess nutrients from cities and farms; and advancing and defending key state, regional, and federal policies and funding.</p> 
        </section> 
        <section className='key'> 
         <p className={keyClick} onClick={this.handleKeyClick}>View July 2016 Proposed Grants</p> 
        </section> 
        <section className='greatlakes-content'> 
         <h2 className='tier one'><span>Organizations Receiving Great Lakes Grant Payments in 2016</span></h2> 
         <div className={tierAq}> 
          <h3 onClick={this.handleAquaClick}><span>Aquatic Invasive Species</span></h3> 
          <ul className='tier three'> 
           <li className='title'><h4><span>Asian Carp</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>Freshwater Future</li> 
           <li>Great Lakes & St. Lawrence Cities Init.</li> 
           <li>Great Lakes Commission</li> 
           <li>NRDC</li> 
           <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
          </ul> 
          <ul className='tier three'> 
           <li className='title'><h4><span>Ballast Water</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>NRDC</li> 
           <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
          </ul> 
         </div> 
         <div className={tierPol}> 
          <h3 onClick={this.handlePollutedClick}><span>Poluted Runoff</span></h3> 
          <section className='tier three'> 
           <h4><span>Urban</span></h4> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Policy Solutions</span></h5></li> 
            <li>CNT</li> 
            <li>Metropolitan Planning Council</li> 
            <li>State Advocates: <span className={keyClick}>OEC, MEC</span>, MEP, <span>Clean WI</span></li> 
           </ul> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Pilots</span></h5></li> 
            <li>Chi Cal Rivers Fund</li> 
            <li>CNT</li> 
            <li>SWWT</li> 
           </ul> 
          </section> 
          <section className='tier three'> 
           <h4><span>Agriculture</span></h4> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Policy Solutions</span></h5></li> 
            <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
            <li>Freshwater Future</li> 
            <li>Great Lakes Commission</li> 
            <li>MI LCV Ed. Fund</li> 
            <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
            <li>OSU StoneLab</li> 
            <li>State Advocates: <span className={keyClick}>OEC, MEC</span>, MEP, <span>Clean WI</span></li> 
            <li>US Water Alliance</li> 
           </ul> 
           <ul className='tier four'> 
            <li className='title'><h5><span>Pilots</span></h5></li> 
            <li>Environmental Defense Fund</li> 
            <li>Nature Conservancy</li> 
           </ul> 
          </section> 
         </div> 
         <div className={tierFed}> 
          <h3 onClick={this.handleFederalClick}><span>Federal & Regulated Policy</span></h3> 
          <ul className='tier three'> 
           <li onClick={this.handleGlriClick} className={glri}><h4><span>Great Lakes Restoration Initiative</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>Freshwater Future</li> 
           <li>Great Lakes & St. Lawrence Cities Init.</li> 
           <li>Great Lakes Commission</li> 
           <li>Healing Our Waters Coalition (NPCA, NWF)</li> 
          </ul> 
          <ul className='tier three'> 
           <li onClick={this.handleGlcClick} className={glc}><h4><span>Great Lakes Compact</span></h4></li> 
           <li onClick={this.handleAllianceClick} className={keyClick}>Alliance for the Great Lakes</li> 
           <li>NRDC</li> 
           <li onClick={this.handleNwfClick} className={keyClick}>NWF</li> 
           <li>State Advocates: <span className={keyClick}>OEC, MEC</span>, MEP, <span>Clean WI</span></li> 
          </ul> 
         </div> 
        </section> 
       </div> 
       <InfoSide aquaClass={aq} pollutedClass={pol} fedClass={fed} glriClass={glri} glcClass={glc} allianceClass={alliance} nwfClass={nwf} infoClass={glContentClick} /> 
      </div> 
     ); 
    } 
}) 

、ここでInfosideコンポーネントです：

import React from 'react' 
import 'stylesheets/modules/infoside.scss' 

export default React.createClass({ 
    render:function(){ 
     return(
     <section id='info-side' className={'info-side '+this.props.infoClass}> 
      <div className='info-side-wrap'> 
      <p className={this.props.aquaClass}>Aquatic stuff here</p> 
      <p className={this.props.pollutedClass}>Polluted stuff here</p> 
      <p className={this.props.fedClass}>Federal stuff here</p> 
      <p className={this.props.glriClass}>GLRI stuff here</p> 
      <p className={this.props.glcClass}>GLC stuff here</p> 
      <p className={this.props.allianceClass}>Alliance stuff here</p> 
      <p className={this.props.nwfClass}>NWF stuff here</p> 
      </div> 
     </section> 
    ); 
    } 
}) 

Answer 1

classnames

var classNames = require('classnames'); 

var Button = React.createClass({ 
    // ... 
    render() { 
    var btnClass = classNames({ 
     'btn': true, 
     'btn-pressed': this.state.isPressed, 
     'btn-over': !this.state.isPressed && this.state.isHovered 
    }); 
    return <button className={btnClass}>{this.props.label}</button>; 
    } 
});