javascript - 请教一下,这种按钮切换状态要怎么做
高洛峰
高洛峰 2017-04-11 11:01:49
0
2
585

请问用react怎么写这种按钮的切换状态呢,因为要根据这两种状态判断接下来的操作。同时激活的按钮背景还要变成绿色

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(2)
伊谢尔伦

做成一个组件, 用state去控制哪个是active, 循环出一个list, 判断有几个按钮,onClick的时候去改变组件的state,标识哪个是active , 重新渲染组件.

小葫芦
onChange(type){
  this.setState({type:type})
}

render(){
   let content = this.state.type === '生产' ? <生产   /> : <采购 />
   return(
  <p>
    <p>
      <button className={this.state.type === '生产' ? "active" : ""}  onClick= {this.onChange.bind(this,"生产")}>生产<button>
      <button className={this.state.type === '采购' ? "active" : ""}  onClick= {this.onChange.bind(this,"采购")}}>采购<button>
    </p>
    {content}
  </p> 
)
}

大概这样吧

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template