在ReactJs中输出事件的角度 [英] Output events's Angular in ReactJs

问题描述

我一直在寻找在ReactJs中创建类似Angular之类的输出事件的方法.

I was looking the way to create in ReactJs similar output events like Angular.

我正在根据Atomic设计在ReactJs中构建组件库，因此，例如，我在其他组件中注入了Button，我想知道如何为Button编写道具，因此每次用户按下按钮将启动该prop(以Angular方式输出)，以便在注入该对象的父对象中对其进行检测.

I am making a library of components in ReactJs according to Atomic design, so, I have, for example, a Button injected in other component, and I would like to know how I could write a props for Button, so everytime the user press the button would launch this prop(a output in Angular way) to be detected in the parent where it was injected.

我不想使用State，因为我希望组件完全独立.

I don't want to use the State because I want that the components are fully independent.

预先感谢

推荐答案

react中没有与@output EventEmitter等效的内容.执行此操作的标准方法是将props中的回调传递给子组件.像这样:

There is no equivalent to @output EventEmitterin react. The standard way to do this is to pass a callback in the props to the child component. Like so:

  class Parent extends React.Component {
      handleChildClicked = () => {
          console.log('child clicked');
      }
      render() {
        <Child onClick={this.handleChildClicked} />
      }
  }

  const Child = (props: Props) => {
    const { onClick } = props;
    return (
      <button onClick={onClick}>Clicky!</button>
    );
  };

这篇关于在ReactJs中输出事件的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！