在 React 中发出自定义事件答案

【问题标题】：Emitting custom event in React在 React 中发出自定义事件
【发布时间】：2020-11-17 13:31:36
【问题描述】：

在 Vue.js 中，我们可以发出自定义事件以及类似的参数

this.$emit('bark', 3);

然后我们就可以在父组件上监听这个事件了

<parent-component @bark=handleBark />

handleBark (howManyTimes) {
    console.log(howManyTimes);
    // logs 3
}

我们如何在 React 中做到这一点？

【问题讨论】：

stackoverflow.com/questions/21951734/… 这能回答你的问题吗？
@illiteratewriter 实际上没有:) 我需要一个例子来说明它应该如何在 React 或“React 方式”中完成。据我了解，事件冒泡在 React 中不存在，那么我们应该如何在 React 中编写这个简单的bark 示例？
所以假设你有一个父子组件。在您的子组件中，您正在执行一些操作，您需要将该事件或一些自定义值传递给父组件您可以使用回调函数，这就是您正在寻找的，如果是，我可以添加一个示例 sn-p 代码.告诉我
@DILEEPTHOMAS 是的。正是:)
当然会添加相同的代码sn-p。

标签： javascript reactjs

【解决方案1】：

您只需将自定义事件处理程序传递为props。

例如，如果您有Parent 和Child 功能组件。然后，您可以在 Parent 组件中定义自定义事件处理程序，例如：

function Parent(props) {
  const handleBark = (howManyTimes) => {
    console.log(howManyTimes);
  };
  
  // note below I am sending the handleBark method to Child as props
  return (<Child bark={handleBark} />);
}

然后在Child 组件中，您可以简单地将其称为：

props.bark(10);

【讨论】：

【解决方案2】：

正如@usafder 所提到的那样。我只是为输入字段添加基本回调函数。所以在控制台上可以看到当前值。

基本上回调函数是从子组件中获取数据的方式。

Parent.js

import React from "react";
import Child from "./Child";

export default function App() {
  const parentHandleChange = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <Child handleChange={parentHandleChange} />
    </div>
  );
}

Child.js

import React from "react";

const Child = (props) => {
  return <input onChange={props.handleChange} />;
};

export default Child;

工作codesandbox

如果您需要返回自定义值，请添加它

<Child onHandleChange={() => parentHandleChange(10)}

因为如果你想传递一个值，它不会每次都调用。

【讨论】：

【解决方案3】：

您也可以使用 this library, Evento，我创建它来复制 Svelte 的 createEventDispatcher() 和 Vue 的 $emit。

您必须使用钩子创建事件发射器（按约定命名evento），并通过传递事件名称和有效负载来像使用 $emit 一样使用调度程序：

const Dog = (props) => {
  const evento = useCreateEvento(props)
 
  return <button onCLick={() => evento('bark', 3)}>wof</button>
}

父组件将能够像侦听 React 事件一样侦听事件：通过使用 on + 组件事件的大写名称。数据将存储在event.detail。

<Dog onBark={e => console.log(`barked ${e.detail} times`)} /> 
/* will log 'barked 3 times'*/

【讨论】：