如何在 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 {

    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. 当事件处理程序被触发时，上下文菜单本身与包装的组件一起呈现