登录

javascript - 请教一下,这种按钮切换状态要怎么做

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

# JavaScript
高洛峰高洛峰2146 天前351 次浏览

全部回复(2) 我要回复

  • 伊谢尔伦

    伊谢尔伦2017-04-11 11:03:49

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

    回复
    0
  • 高洛峰

    高洛峰2017-04-11 11:03:49

    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> 
    )
    }
    

    大概这样吧

    回复
    0
  • 取消回复发送