在 React 中发出自定义事件

Question

在 Vue.js 中，我们可以发出自定义事件以及一个参数，例如

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

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

<parent-component @bark=handleBark />

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

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

原文由 Pooria Han 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

作为@usafder，提到了方式。我只是为输入字段添加基本回调函数。所以在控制台上你可以看到当前值。

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

父类.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>
  );
}

子.js

 import React from "react";

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

export default Child;

工作 代码和盒子

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

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

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

原文由 Learner 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议