14-事件方法的总结

一、事件函数中this丢失的解决办法

• ES5事件函数换成ES6事件函数
• 绑定事件时，更换成onClick{()=>this.setName()};此时声明时间函数使用ES5或ES6都可以
• 如果onclick 绑定事件，不用箭头函数，声明事件也不用箭头函数；可以使用bind解决

二、相关逻辑解释

三、代码示例

 class Root extends React.Component {
        constructor() {
          super();
          this.state = { name: "小明" };
        //   给普通函数注入this 指向
        this.newSetNameFour=this.setNameFour.bind(this);
        }
        render() {
          return (
            <div className="root">
              <h4>Root组件</h4>
              <p>姓名: {this.state.name}</p>

              {/* this会丢失 */}
              <button onClick={this.setName}>修改name1</button>
              <button onClick={this.setNameTwo}>修改name2</button>
              {/* e会丢失  传个参数就好了*/}
              <button onClick={() => this.setName()}>修改name3</button>
              <button onClick={(e) => this.setName(e)}>修改name4</button>
              <button onClick={(e) => this.setNameThree(e, 1, "测试")}>
                修改name5
              </button>
              <button onClick={this.newSetNameFour}>修改name6</button>
              <button onClick={this.setNameFour.bind(this)}>修改name6</button>
            </div>
          );
        }
        setName(e) {
          console.log(e);
          //   console.log(this);//undefined
          this.setState({
            name: "李四",
          });
        }
        setNameTwo = (e) => {
          console.log(e);
          console.log(this); //指向当前的root
          this.setState({
            name: "李四",
          });
        };
        setNameTree = (e, num, str) => {
          console.log(e, num, str);
          console.log(this); //指向当前的root
          this.setState({
            name: "李四",
          });
        };
        setNameFour(){
            console.log(this);
        }
      }
      ReactDOM.render(<Root />, document.getElementById("app"));

      //  事件函数中this丢失的解决办法
      // 1.ES5事件函数换成ES6箭头函数
      // 2.绑定事件时，更换成onClick{()=>this.setName()};此时声明事件函数使用ES5或ES6 都可以
    //   如果onClick绑定事件，不用箭头函数，声明事件也不用箭头函数;可以使用bind解决