Day56 (React)

1.Event (Lab_Event > index_0.html)

onClick 呼叫 doClick 执行顺序

        render() {
          return (
            // 1. onClick 呼叫 doClick
            <button onClick={this.doClick} className="btn btn-outline-success">
              {this.state.isToggleOn ? "ON" : "OFF"}
            </button>
            //state.isToggleOn 对应 this.state = { isToggleOn: true };
          );
        }

(1)render 制作 Toggle

     ReactDOM.render(<div className="container">
          <Toggle />
        </div>,
        document.getElementById("root")
      );

(2)Toggle 继承 React.Component 并拿出 props 来使用 state
(state属性制作需要利用this)

      class Toggle extends React.Component {
        constructor(props) {
          super(props);
          this.state = { isToggleOn: true };
          //this.doClick = this.doClick.bind(this);
          // 3.定义何谓this ; 此时无需使用=>函式
        }

(3)使用箭头函式，才收的到this

        doClick = (e) => {
          alert("Button clicked.");
          this.setState({ isToggleOn: !this.state.isToggleOn });
          console.log(this);
        };

(4)互动

        render() {
          return (
            // onClick 呼叫 doClick
            <button onClick={this.doClick} className="btn btn-outline-success">
              {this.state.isToggleOn ? "ON" : "OFF"}
            </button>
            //state.isToggleOn 对应 this.state = { isToggleOn: true };
          );
        }
      }

2.Class介绍

(JavaScript > 06_class > test.html)
(JavaScript > 06_class > lab02.html)

继承的写在最上面

制作Wheels

class Wheels {
constructor(num) { //设定
this.wheels = num; //轮子
}
showWheels() {
console.log(this.wheels);
}
}

制作Car 继承 Wheels 并呼叫父层属性num

继承super有两种
super()：呼叫父层函数全部建构式
super.XXX：仅呼叫XXXfunction

 class Car extends Wheels {     //继承 
        constructor(c, num) {   //设定
          super(num); //呼叫父层函数全部建构式
          super.showWheels(); //仅呼叫父层function:console.log(this.wheels);
          this.color = c; //颜色
        }

        showInfo() {
          console.log(this.color);
          console.log(this.wheels);
        }
      }

呼叫

      var myWheels = new Wheels(4);
      myWheels.showWheels();

      console.log("------------");

而且myCar可以使用继承的function

      var myCar = new Car("green", 4);
      myCar.showInfo(); //  4 
      myCar.showWheels(); //  4

3.get set (JavaScript > 06_class > lab.html)

取得数值的办法有二，尽量使用方法2.

方法1.使用预设(constructor)取得数值

      class Animal {
        // 2. 接收100
        constructor(wightValue) {   //constructor预设
          alert(wightValue);  //100
          this.weight = wightValue; // 3. 把100送进weight
          this._weight = wightValue;
        }

        date = 3;
        makeSound() {
          alert("01");
        }
      }

      // 建造物件
      var obj = new Animal(100); // 1. 输入100
      alert(obj.date); //01
      alert(obj.makeSound); //f
      alert(obj.weight); // 4. 取得100

方法2.利用前述方法1.取得预设，更改後取得数值(get set)
业界使用 _区别被取得的预设值(功能:保留初始值)

      class Animal {
        constructor(wightValue) {
          //constructor预设
          this._weight = wightValue;  // 2.业界使用__区别被取得的预设值
        }

        get weight() {                  //3. 取得方式
          return this._weight;
        }

        
        set weight(Value) {            //4.送资料进来进行检查
          alert("in setWeight");
          if (Value > 0) {
            this._weight = Value;
          }
        }
      }

      //使用
      var obj = new Animal(100); // 1. 输入100给Animal(本件无关)

      obj.weight = 300;  // 1.输入值300给weight
      alert(obj.weight); // 5.输出300

4.use strict 给JS的字条，使用严格模式(非字串)

(JavaScript > 06_class > lab01.html)

      "use strict"; // //给JS的字条，使用严格模式(非字串)
      var userName = "Chien";
      //....
      userName = "Chyan777"; //变数名称 打对 ，顺利更改
      alert(window.userName);

      userNme = "Chyan"; //变数名称打错 ， 不会再创出此变数
      alert(userNme); //无法显示 ，报错误

5.继承只能继承extends一个，不能,+,+,+

    class CDog extends CAnimal {
        makeSound() {
            // super.makeSound();
            alert("Dog barking!");
        }
    }

但是我想继承多个怎麽办？上层也继承，爸爸继承爷爷，孙女也会继承爷爷