如何在 ReactJS 的父组件上设置事件侦听器？

Question

我正在尝试创建一个自定义上下文菜单，当用户右键单击我页面的某个部分时激活该菜单（我希望在页面的其余部分使用浏览器的默认上下文菜单）。

从父元素我调用子元素：

<ContextMenu clickDomain={this.parentRef}>

（当然，我在构造函数中创建了 ref: this.parentRef = React.createRef();）。

在子<ContextMenu>组件中，我尝试contextmenu使用传递的 ref为事件设置域：

componentDidMount() {

        const self = this;

        console.log(this.props);

        console.log(!!self.props.clickDomain);

        console.log(!!self.props.clickDomain.current);

        const domain = self.props.clickDomain && self.props.clickDomain.current 

            ? self.props.clickDomain.current : document;

        console.log(domain);

        domain.addEventListener('contextmenu', 

             this.openContextMenu(self));

    }

（除其他外，openContextMenu设置状态visible: true以及 x 和 y 坐标。）

但是!!self.props.clickDomain.current是假的（self.props.clickDomain.current为空）并且domain是document。

那么不知何故，即使父 ref 不在 DOM 中，子组件也已经“安装”了？

如何向子组件传递对父组件的实时引用，以便我可以从子组件内部在父组件上设置事件侦听器？

Answer 1

回调引用可能是一个解决方案。您可以使用状态在设置后存储引用，并传递this.state.ref给<ContextMenu/>组件。但我建议你试试这个：class WithContextMenu extends React.Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {open: false};&nbsp; &nbsp; }&nbsp; &nbsp; openContextMenu(e) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; this.setState({open: true});&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (<React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {React.cloneElement(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; React.Children.only(this.props.children),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { onContextMenu: this.openContextMenu.bind(this) }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.state.open && <div>context menu</div> }&nbsp; &nbsp; &nbsp; &nbsp; </React.Fragment>)&nbsp; &nbsp; }}// In any other componentconst MyComponent = () => (&nbsp; &nbsp; <WithContextMenu>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Hello</h1>&nbsp; &nbsp; &nbsp; &nbsp; <p>Right-click to open context menu</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </WithContextMenu>);然后，您可以使用上下文菜单装饰任何组件。下面是它的工作原理：将任何组件包裹在一个WithContextMenu组件中一个onContextMenu事件处理程序被附接到包裹部件当事件处理程序被触发时，上下文菜单本身与包装的组件一起呈现