红绿灯切换效果

红绿灯切换效果

1.JS代码（父类）

export default class Light extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            isRed: 0,
            isYellow: 0,
            isGreen: 0
        }
    }

    onChangeState(isTrue){
        this.setState(isTrue)
        //console.log(isTrue)
    }

    redClass() {
        let style = {};
        style["div_light_grey"] = true;
        if (this.state.isRed !== 0){
            style["div_light_red"] = true;
        }
        return style;
    }

    yellowClass() {
        let style = {};
        style["div_light_grey"] = true;
        if (this.state.isYellow !== 0){
            style["div_light_yellow"] = true;
        }
        return style;
    }

    greenClass() {
        let style = {};
        style["div_light_grey"] = true;
        if (this.state.isGreen !== 0){
            style["div_light_green"] = true;
        }
        return style;
    }

    getDom(){
        return <div key="div" className="div">
                    <div key="div_light" className="div_light">
                        <div key="red" className={ClassNames(this.redClass())}/>
                        <div key="yellow" className={ClassNames(this.yellowClass())}/>
                        <div key="green" className={ClassNames(this.greenClass())}/>
                    </div>
                    <div key="div_button" className="div_button">
                        <RedLight key="redLight" onClicked={this.onChangeState.bind(this)}/>
                        <YellowLight key="yellowLight" onClicked={this.onChangeState.bind(this)}/>
                        <GreenLight key="greenLight" onClicked={this.onChangeState.bind(this)}/>
                        <AllLight key="allLight" onClicked={this.onChangeState.bind(this)}/>
                        {/*<AllNotLight key="allNotLight" onClicked={this.onChangeState.bind(this)}/>*/}
                    </div>
                </div>

    }

    render(){
        console.log("渲染：render");
        return this.getDom();
    }
}

2.JS代码（子类）

　　---红灯demo，其他灯写法一样，省略了

let _click = true;
let text = "红灯亮";

export default class RedLight extends React.Component{

    redLight(){
        this.click = ()=>{
            if(_click){
                _click = false;
                text = "红灯灭";
                this.props.onClicked(
                    {
                        isRed: 1,
                        isYellow: 0,
                        isGreen: 0
                    }
                );
            }else if(!_click){
                _click = true;
                text = "红灯亮";
                this.props.onClicked(
                    {
                        isRed: 0
                    }
                );
            }
        };

        return <button key="red_button"
                       className="redLight"
                       onClick={()=>this.click()}
                >{text}</button>
    }

    render() {
        return this.redLight();
    }

}

3.SCSS代码

.div{
  width: 15rem;
  height: 15rem;
  margin: 5rem auto;
  .div_light{
    border: 1px solid #000;
    width: 5rem;
    height: 15rem;
    float: left;
    .div_light_grey{
      @extend .div_light;
      height: 5rem;
      background: grey;
      border-radius: 50px;
    }
    .div_light_red{
      @extend .div_light;
      height: 5rem;
      background: red;
      border-radius: 50px;
    }
    .div_light_yellow{
      @extend .div_light;
      height: 5rem;
      background: yellow;
      border-radius: 50px;
    }
    .div_light_green{
      @extend .div_light;
      height: 5rem;
      background: green;
      border-radius: 50px;
    }
  }
  .div_button{
    border: 1px solid #000;
    width: 5rem;
    height: 15rem;
    float: left;
    margin-left: 5rem;
    .redLight{
      margin: 1.7rem 1rem 1rem 1rem;
      cursor: pointer;
    }
    .yellowLight{
      margin: 1rem;
      cursor: pointer;
    }
    .greenLight{
      margin: 1rem;
      cursor: pointer;
    }
    .allLight{
      margin: 1rem;
      cursor: pointer;
    }
    .allNotLight{
      margin: 1rem;
      cursor: pointer;
    }
  }
}

4.效果图

 

注：有点小BUG，灯的状态~~~