组件与事件绑定

React中的组件

函数组件

函数组件是一个简单的 JavaScript 函数，它接受 props 作为参数并返回 React 元素。

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

类组件

类组件是一个扩展自 React.Component 的类，必须包含一个 render 方法，该方法返回 React 元素。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default App;

函数组件与类组件的区别

• 生命周期：函数组件没有生命周期方法（如 componentDidMount），但可以通过 React Hooks 来实现类似的功能。

• this 关键字：函数组件没有 this，而类组件通过 this 来访问组件实例。

• 状态管理：函数组件没有内部状态（直到 React Hooks 引入），类组件通过 this.state 和 this.setState 来管理状态。

React中的事件绑定

在 React 中，事件绑定是通过在 JSX 中添加事件处理程序来实现的。事件处理程序可以是类方法或函数。

示例：点击事件绑定

使用类组件

import React, { Component } from 'react';

class App extends Component {
// 事件处理函数（定义为一个方法）
  handleClick() {
    e.preventDefault(); // 在 *React* 中无法您无法通过 returnfalse来阻止 React 中的默认行为。您必须preventDefault显式调用。
    console.log('Hello, world!');
  }

  render() {
    return (
      <div className="App">
        <form onClick={this.handleClick}>
        <button type="submit">submit</button>
        </form>
      </div>
    );
  }
}

export default App;

使用函数组件

import React from 'react';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Hello, world!');
  }

  return (
    <div className="App">
      <form onClick={handleClick}>
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

export default App;

事件对象

在 React 中，事件对象是通过参数传递给事件处理函数的。React 的事件处理函数中传入的事件对象是一个合成事件对象，它具有与原生事件对象相同的接口，但跨浏览器标准化。

<button onClick={(e) => this.handleClick(e)}>Click me</button>

可以通过 e.nativeEvent 属性访问原生事件对象。

eventHandler(e) {
  console.log(e.nativeEvent); // 原生事件对象
}

this的指向

由于 JavaScript 中 this 的特殊性，事件处理函数中的 this 并不会自动指向当前组件。以下是解决方案：

1. 使用箭头函数定义事件处理函数。

2. 使用箭头函数在 JSX 中绑定事件处理程序。

3. 使用 bind 方法绑定 this。

示例：

<button onClick={() => this.handleClick()}>Click me</button>

<button onClick={this.handleClick.bind(this)}>Click me</button>

向事件处理程序传递参数

在React中，您可以通过箭头函数或bind方法向事件处理程序传递参数。写法如下：

箭头函数

<button onClick={(e) => this.handleClick(e, 'Hello, world!')}>Click me</button>

bind方法

<button onClick={this.handleClick.bind(this, 'Hello, world!')}>Click me</button>