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!");        }    }

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