剖析React中的事件、this指向与数据赋值的奥秘

2023-09-03 19:26:45

React学习笔记（二）—— 事件、this指向、数据赋值

1. React事件处理

React中的事件处理与传统的JavaScript事件处理非常相似，可以使用onClick、onMouseMove等事件属性来绑定事件处理函数。但是，在React中，事件处理函数必须是一个箭头函数或一个已绑定this的普通函数。这是因为在React中，组件的this指向组件本身，而不是DOM元素。

1.1 绑定事件处理函数

绑定事件处理函数有两种方式：

使用箭头函数：箭头函数会自动绑定this指向组件本身，因此可以在箭头函数中直接使用this。

render() {
  return (
    <button onClick={() => this.handleClick()}>点我</button>
  );
}

使用已绑定this的普通函数：可以使用bind(this)方法将普通函数的this指向绑定到组件本身，然后在事件处理函数中使用该函数。

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

render() {
  return (
    <button onClick={this.handleClick}>点我</button>
  );
}

handleClick() {
  // this指向组件本身
}

1.2 事件处理函数中的this指向

在React的事件处理函数中，this指向组件本身。这意味着您可以直接在事件处理函数中访问组件的属性和方法。例如，在下面的代码中，this.state.count表示组件的状态变量count，而this.handleClick()表示组件的方法handleClick()。

render() {
  return (
    <button onClick={this.handleClick}>点击次数：{this.state.count}</button>
  );
}

handleClick() {
  this.setState({ count: this.state.count + 1 });
}

2. React的this指向

在React中，this指向组件本身。这意味着您可以直接在组件的方法和生命周期函数中访问组件的属性和方法。例如，在下面的代码中，this.state.count表示组件的状态变量count，而this.handleClick()表示组件的方法handleClick()。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击次数：{this.state.count}</button>
    );
  }
}

3. React数据赋值

在React中，数据赋值可以通过setState()方法来实现。setState()方法接收一个对象作为参数，该对象包含要更新的状态变量及其值。例如，在下面的代码中，this.setState({ count: this.state.count + 1 })会将组件的状态变量count更新为其当前值加1。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击次数：{this.state.count}</button>
    );
  }
}