在React中触发自定义事件

Question

在Vue.js中，我们可以像这样发出带有参数的自定义事件：

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

然后我们可以在父组件上监听此事件，如下：

<parent-component @bark=handleBark />

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

我们如何在React中实现这一点？

- Pooria Han

---

这个回答你的问题吗？ - illiteratewriter

@illiteratewriter 其实不是的 :) 我需要一个在React中或者说是“React方式”下的例子。从我所理解的来看，在React中并不存在事件冒泡，那么我们应该如何在React中编写这个简单的bark例子呢？ - Pooria Han

假设你有一个父组件和一个子组件。在子组件中，你正在执行一些操作，并且你需要将该事件或某些自定义值传递给父组件，你可以使用回调函数，这是你想要的吗？如果是的话，我可以添加一个示例代码片段。请让我知道。 - Learner

是的，没错 :) @DILEEPTHOMAS - Pooria Han

当然会添加相应的代码片段。 - Learner

已添加@PooriaHan，请告诉我是否有帮助。 - Learner

Answer 1

正如@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)}

因为这样它不会在每次调用时传递值。

- Learner

---

你如何将这个传递给存储在变量中的组件？ :) 我似乎不理解HOCs以及如何通过HOC传递数据。 - ii iml0sto1

Answer 2

你只需要将自定义事件处理程序作为 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);

- usafder

Answer 3

你也可以使用我创建的 Evento 库来复制 Svelte 的 createEventDispatcher() 和 Vue 的 $emit。

按照惯例，你需要使用 hook 创建事件发射器（命名为 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'*/

- Aÿlo