红绿灯切换效果

红绿灯切换效果

1.JS代码（父类）

import React from 'react';
import ClassNames from 'classnames';

import RedLight from "./redLight";
import YellowLight from "./yellowLight";
import GreenLight from "./greenLight";
import AllLight from "./allLight";
import AllNotLight from "./allNotLight";

import './style/light.scss';

export default class Light extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            isRed: 0,
            isYellow: 0,
            isGreen: 0
        };
        this._textRed = "红灯亮";
        this._textYellow = "黄灯亮";
        this._textGreen = "绿灯亮";
        this._textAll = "全都亮";
    }

    onChangeState(isTrue){
        if(isTrue.isRed === 1){
            this._textRed = "红灯灭"
        }else{
            this._textRed = "红灯亮"
        }
        if(isTrue.isYellow === 1){
            this._textYellow = "黄灯灭"
        }else{
            this._textYellow = "黄灯亮"
        }
        if(isTrue.isGreen === 1){
            this._textGreen = "绿灯灭"
        }else{
            this._textGreen = "绿灯亮"
        }
        if(isTrue.isRed === 1 && isTrue.isYellow === 1 && isTrue.isGreen === 1){
            this._textAll = "都不亮"
        }else if(isTrue.isRed === 0 && isTrue.isYellow === 0 && isTrue.isGreen === 0){
            this._textAll = "全都亮"
        }
        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={(object)=>{
                                      this.onChangeState(object)}
                                  }
                                  text={this._textRed}
                                  textAll={this._textAll}
                        />
                        <YellowLight key="yellowLight"
                                     onClicked={(object)=>{
                                         this.onChangeState(object)}
                                     }
                                     text={this._textYellow}
                                     textAll={this._textAll}
                        />
                        <GreenLight key="greenLight"
                                    onClicked={(object)=>{
                                        this.onChangeState(object)}
                                    }
                                    text={this._textGreen}
                                    textAll={this._textAll}
                        />
                        <AllLight key="allLight"
                                  onClicked={(object)=>{
                                      this.onChangeState(object)}
                                  }
                                  text={this._textAll}
                        /></div>
                </div>

    }

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

2.JS代码（子类）

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

import React from 'react';

import './style/light.scss';

export default class RedLight extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            text:this.props.text,
            textAll: this.props._textAll
        };

        this.click = ()=>{
            if(this.state.text === "红灯亮"){
                this.setState({text: "红灯灭"});
                this.props.onClicked(
                    {
                        isRed: 1,
                        isYellow: 0,
                        isGreen: 0
                    }
                );
            }else if(this.state.text === "红灯灭"){
                this.setState({text: "红灯亮"});
                if(this.state.textAll === "都不亮"){
                    this.props.onClicked(
                        {
                            isRed: 0,
                            isYellow: 1,
                            isGreen: 1
                        }
                    );
                }else{
                    this.props.onClicked(
                        {
                            isRed: 0
                        }
                    );
                }
            }
        };
    }

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

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

    componentWillReceiveProps(nextProps){
        this.setState(
            {
                text: nextProps.text,
                textAll: nextProps.textAll
            }
        )
    }

}

3.SCSS代码

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

4.效果图