javascript - 如何在 ReactJS 的父组件上设置事件监听器？

Question

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

从父元素中我调用子元素:

<ContextMenu clickDomain={this.parentRef}>

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

在 child <ContextMenu>组件我尝试设置 contextmenu 的域使用传递的引用的事件:

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为 false(self.props.clickDomain.current 为空)且 domain是 document .

那么，即使父引用不在 DOM 中，子组件也已经“挂载”了？

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

Answer 1

Callback refs可能是一个解决方案。您可以使用状态来存储设置后的引用，并传递 this.state.ref到<ContextMenu/>组件。

但我建议你尝试这个:

class WithContextMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {open: false};
    }

    openContextMenu(e) {
        e.preventDefault();
        this.setState({open: true});
    }

    render() {
        return (<React.Fragment>
            {React.cloneElement(
                React.Children.only(this.props.children),
                { onContextMenu: this.openContextMenu.bind(this) }
            )}
            { this.state.open && <div>context menu</div> }
        </React.Fragment>)
    }
}

// In any other component
const MyComponent = () => (
    <WithContextMenu>
      <div>
        <h1>Hello</h1>
        <p>Right-click to open context menu</p>
      </div>
    </WithContextMenu>
);

然后，您可以使用上下文菜单来装饰任何组件。其工作原理如下:

1. 将任何组件包裹在 WithContextMenu 中组件
2. 安 onContextMenu事件处理程序附加到包装的组件
3. 当事件处理程序被触发时，上下文菜单本身会与包装的组件一起呈现