Question

是否可以将点击事件从父级发送到子级？

这是我的父组件：

<Component {...props}>
     <Child />
     {props.children}
</Component>

这是子组件：

<Component onMouseDown={e => this.handleClick(e, props)}></Component>

每当单击父组件时，我都想触发孩子的handleclick组件。

谢谢！

Answer 1

您可以在子组件上使用reference：

// parent.js

constructor(props) {
  super(props);
  this.child = React.createRef();
}

handleMouseDown = e => {
  this.child.current.handleClick(e, this.props);
}

render() {
  return (
    <Component onMouseDown={this.handleMouseDown} {...props}>
       <Child ref={this.child}/>
       {props.children}
    </Component>
  )
}

Answer 2

您可以将rxjs与Observable和Subscriptions一起使用。这是一个有效的示例，我将说明https://codesandbox.io/s/7wjwnznk3j

的情况

相关阅读：

fromEvent：https://rxjs-dev.firebaseapp.com/api/index/function/fromEvent
订阅：https://rxjs-dev.firebaseapp.com/api/index/class/Subscription

我使用Typescript是因为我喜欢它，但是绝对不是必需的。您的父类将如下所示：

interface State {
  obs$?: Observable;
}

class App extends React.Component<null, State> {
  public readonly state: State = {};
  public ref: React.Ref<React.ReactHTMLElement>;

  componentDidMount() {
    this.setState({
      obs$: fromEvent(this.ref, 'click')
    });
  }

  @Bind()
  setParentRef(el: HTMLElement) {
    this.ref = el;
  }

  render() {
    return (
      <div style={parentStyles} ref={this.setParentRef}>
        <Child parentClick={this.state.obs$} />
      </div>
    );
  }
}

我们有参考this.ref并通过函数进行设置，我们需要它，因为它是fromEvent的目标，而click是事件。这将自动创建一个可观察对象，该可观察对象在单击时将发射给所有订阅者。您将需要将此作为道具传递给子组件。然后，您可以在该组件中进行订阅，并在父控件中单击时做任何您想做的事情。

interface Props {
  parentClick?: Observable;
}

interface State {
  onClick$?: Subscription;
  numClicks: number;
}

class Child extends React.Component<Props, State> {
  public readonly state: State = { numClicks: 0 };

  componentDidMount() {
    if (this.props.parentclick) {
      this.handle();
    }
  }

  componentDidUpdate(prevProps: Props) {
    if (
      this.props.parentClick !== undefined &&
      this.state.onClick$ === undefined
    ) {
      this.handleSubscribe();
    }
  }

  componentWillUnmount() {
    if (this.state.onClick$) {
      this.state.onClick$.unsubscribe();
    }
  }

  handleSubscribe() {
    this.setState({
      onClick$: this.props.parentClick.subscribe(this.onParentClick)
    });
  }

  @Bind()
  onParentClick() {
    this.setState((prevState: State) => ({
      numClicks: prevState.numClicks + 1
    }));
  }

  render() {
    return (
      <div style={childStyles}>
        Parent clicked {this.state.numClicks} time(s)
      </div>
    );
  }
}

因此，在这种情况下，当单击父项时，订阅将调用onParentClick方法。然后，在该方法中，我们实现一个简单的计数器，并将其显示在HTML中。

一件重要的事情是始终确保您取消订阅。如果您不这样做，这将导致内存泄漏，并且由于很容易被忽略，因此很难跟踪。

从父级到子级发送onMouseDown

2 个答案: