React和JSX的新手，我试图更好地或更有效地操纵类和管理点击事件。我正在研究两个组件（其中一个组件变得非常大）-Greatlakes＆amp; 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>
);
}
})
答案 0 :(得分：1)
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>;
}
});