在 React.js 中通过事件将子组件的道具传递给父组件：两种有效方法

2024-03-03 19:36:26

在 React.js 中通过事件将子组件的道具传递给父组件

在 React.js 应用中，组件通过道具接收数据。然而，有时你可能需要将子组件的道具传递给父组件。本文将探讨通过事件实现此操作的两种方法。

方法 1：使用回调函数

回调函数允许你将子组件的道具作为参数传递给父组件。这是实现此操作的步骤：

在子组件中，创建处理事件的函数，并将子组件的道具作为参数传递给父组件：

class Child extends React.Component {
  handleClick = () => {
    this.props.onClick(this.props);
  };

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

在父组件中，创建回调函数，接收子组件的道具并执行所需的逻辑：

class Parent extends React.Component {
  handleClick = (props) => {
    console.log(props);
  };

  render() {
    return <Child onClick={this.handleClick} />;
  }
}

方法 2：使用自定义事件

自定义事件允许你创建自己的事件，并在触发时传递数据。这是实现此操作的步骤：

在子组件中，创建一个自定义事件并添加事件监听器：

class Child extends React.Component {
  componentDidMount() {
    window.addEventListener('myCustomEvent', this.handleCustomEvent);
  }

  componentWillUnmount() {
    window.removeEventListener('myCustomEvent', this.handleCustomEvent);
  }

  handleCustomEvent = (e) => {
    console.log(e.detail);
  };

  render() {
    return <button onClick={() => window.dispatchEvent(new CustomEvent('myCustomEvent', { detail: this.props }))}>Click Me</button>;
  }
}

在父组件中，添加事件监听器以处理自定义事件：

class Parent extends React.Component {
  componentDidMount() {
    window.addEventListener('myCustomEvent', this.handleCustomEvent);
  }

  componentWillUnmount() {
    window.removeEventListener('myCustomEvent', this.handleCustomEvent);
  }

  handleCustomEvent = (e) => {
    console.log(e.detail);
  };

  render() {
    return <Child />;
  }
}