作者：我不是小叮当
链接：https://www.jianshu.com/p/8b9c697509cb
来源：简书
最近刚开始学习react.js 要直接应用到公司的项目中，所以入得坑甚至是走的弯路数不胜数，不管是多么复杂的还是多么白痴的坑，现在一一记录下来。
如下图，是其中一个设置性别的页面效果图，按照jQuery的写法就是绑定点击事件并且XX.addClass(‘XX’).siblings().removeClass(‘XX’);其实在react中也很简单，但是因为对基础知识没有系统的学习，所以入坑了。下面展示最后自己总结的两个方法，日后再有更好的方法时再进行总结。
方案一：（改变style）
<body>
<div class="page mine_memberInfo_sexPage" id="mineMemberInfoSexPage"></div>
</body>
<script type="text/babel">
var SexSelect = React.createClass({
getInitialState: function () {
return{
sex:"male"
}
},
manItemClick:function () {
this.setState({
sex:"male"
})
},
femaleItemClick:function () {
this.setState({
sex:"female"
})
},
render: function () {
var sexActiveStyle = {
backgroundImage: "url('img/images/mine_memberInfo_sex_gou.png')",
backgroundSize: "13px 10px",
backgroundRepeat: "no-repeat",
backgroundPosition: "right center"
};
var man = {
width: "100%",
padding: "6% 0",
borderBottom: "1px solid #efeff4"
};
var female ={
width: "100%",
padding: "6% 0",
};
var sex = this.state.sex;
return(
<div className="container">
<div className="sexSelectWrap">
<div className="man" style ={sex == "male" ? sexActiveStyle: man } onClick={this.manItemClick}>
<div>男</div>
</div>
<div className="female" style ={sex == "female" ? sexActiveStyle: female} onClick={this.femaleItemClick}>
<div>女</div>
</div>
</div>
<button>确定</button>
</div>
)
}
});
ReactDOM.render(
<SexSelect/>,
document.getElementById("mineMemberInfoSexPage")
)
</script>
方案二：（直接操纵className）
<body>
<div class="page mine_memberInfo_sexPage" id="mineMemberInfoSexPage"></div>
</body>
<script type="text/babel">
var SexSelect = React.createClass({
getInitialState: function () {
return{
sex:"male"
}
},
manItemClick:function () {
this.setState({
sex:"male"
})
},
femaleItemClick:function () {
this.setState({
sex:"female"
})
},
render: function () {
var sex = this.state.sex;
return(
<div className="container">
<div className="sexSelectWrap">
<div className={sex == "male" ? "man sexActive": "man"} onClick={this.manItemClick}>
<div>男</div>
</div>
<div className={sex == "female" ? "female sexActive": "female"} onClick={this.femaleItemClick}>
<div>女</div>
</div>
</div>
<button>确定</button>
</div>
)
}
});
ReactDOM.render(
<SexSelect/>,
document.getElementById("mineMemberInfoSexPage")
)
</script>
其实。这个过程没有什么难度，但是因为将
<div className={sex == "female" ? "female sexActive": "female"} onClick={this.femaleItemClick}>
写成
<div className=“sex == "female" ? female sexActive: female“ onClick={this.femaleItemClick}>
而出现了很多错误，以至于以为不能直接操纵className
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。
比如说有一个固定样式"title":
<div className="title">标题</div>，
然后还要一个点击高亮的样式:
<div className={index === this.state.active ? "active" : null}>标题</div>
不能这样写：
<div className="title" className={index === this.state.active ? "active" : null}>标题</div>
方法一：ES6 模板字符串 ``
className={`title ${index === this.state.active ? 'active' : ''}`}
方法二：join("")
className={["title", index === this.state.active?"active":null].join(' ')}
方法三：classnames(需要下载classnames)
const classNames = require('classnames');
const Button = React.createClass({
// ...
render () {
const 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>;
}
});
个人喜好 第二种，一方面代码量少，另一方面方便对 className数组的增加与删除。
/**
* Style definitions.
*/
const STYLE = {
infoColor: {
color: 'green'
},
warningColor: {
color: 'orange'
},
errorColor: {
color: 'red'
}
};
/**
* Component
*/
class Welcome extends React.Component {
/**
* Rendering into the DOM.
*/
render() {
return (
<div>
<h2 style={STYLE.infoColor}>Welcome!</h2>
)
}
}