【前端知识】React 基础巩固(九)——JSX 事件绑定

React 基础巩固(九)——JSX 事件绑定

事件绑定

• 如果是原生 DOM 的监听事件

  • 方式一：获取 DOM 原生，添加监听事件
  • 方式二：在 HTML 原生中，直接绑定 onclick

• 在 React 中如何操作

  • 命名采用小驼峰，非纯小写
  • 通过{}传入一个事件处理函数，这个函数会在事件发生时被执行

• this 的绑定问题

  • 在事件执行后，我们可能需要获取当前类的对象中相关的属性，此时需要使用到this

    • 若直接打印this，为undefined

  • 为什么是undefined

    • 原因是btnClick函数并不是我们主动调用的，而是当button发生改变时，React内部调用了btnClick函数
    • 而它内部调用时，并不知道要如何绑定正确的this

  • this 的四种绑定规则

    • 1.默认绑定 独立执行 foo()
    • 2.隐式绑定 被一个对象执行 obj.foo() -> obj
    • 3.显示绑定 call/apply/bind foo.call(“aaa”) -> String(“aaa”)
    • 4.new 绑定 new Foo() -> 创建一个新对象，并且赋值给 this

• 事件绑定的三种方法

  • 1.bind给btnClick显式绑定this
  • 2.使用ES6 class fields 语法
  • 3.事件监听时传入箭头函数（推荐）

<script type="text/babel">
  // 1.创建root
  const root = ReactDOM.createRoot(document.querySelector("#root"));

  // 2.封装App组件
  class App extends React.Component {
    // 组件数据
    constructor() {
      super();
      this.state = {
        message: "hello world",
      };

      this.btnClick1 = this.btnClick1.bind(this);
    }

    btnClick1() {
      this.setState({
        message: "outman chen",
      });
    }

    btnClick2 = () => {
      this.setState({
        message: "outman chen",
      });
    };

    btnClick3() {
      this.setState({
        message: "outman chen",
      });
    }

    // 渲染内容
    render() {
      const { message } = this.state;

      return (
        <div>
          <h2>{message}</h2>
          {/* 1.this绑定方式一： bind绑定 */}
          <button onClick={this.btnClick1}>change message</button>
          {/* 2.this绑定方式二： ES6 class fields 利用箭头函数的特点（箭头函数无this，this会指向上一层的类实例） */}
          <button onClick={this.btnClick2}>change message</button>
          {/* 3.this绑定方式三： 直接传入一个箭头函数 */}˜<button onClick={() => this.btnClick3()}>change message</button>
        </div>
      );
    }
  }

  // 3.渲染组件
  root.render(<App />);
script>