react 动态操作className

来源：互联网发布：知乎 angelababy 编辑：程序博客网时间：2024/06/06 23:54

最近刚开始学习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

阅读全文

0 0