ReactJS:禁用父组件的子组件中的鼠标事件

Question

>我有一个这样的组件层次结构：

<parent>
   <someWrapper1>
        <child>
        <child>
   <someWrapper2>
       <child>
       <child>

每个子组件单独处理一堆鼠标事件，其中一些是管理onDragStart和onClick鼠标事件的 D3 包装器。

我正在寻找一种方法来根据父组件的状态禁用<someWrapper1/>、<someWrapper2/>组件以及<child/>组件中的所有鼠标事件。

一种解决方案是将禁用的 prop 传递给包装器组件，并将其传递给每个子组件，然后传递给用于禁用或启用鼠标事件的每个处理程序。我想避免这种情况，因为它很难维护。

我正在寻找一个更好的解决方案，我可以禁用父组件中所有组件中的所有鼠标事件。

谢谢！

Answer 1

如果我理解正确，您希望在 DOM 的特定子树上禁用鼠标事件。在这种情况下，您可以使用 CSS pointer-events: none;规则来实现此目的。

例如，要限制元素/组件及其子元素上的鼠标事件，您可以创建一个具有 pointer-events 键和none值的样式对象，并将其应用于<someWrapper1>组件以动态启用/禁用这些组件(及其后代(上的鼠标事件：

/* Your components render method */
render() {
    /* Acquire the disableEvents value from state, etc */
    const disableEvents = true;
    /* Dynamically compute style for wrapper components 
       to control mouse interactivity */
    const wrapperStyle = { 
        "pointer-events": disableEvents ? "none" : "unset" 
    };
    /* Apply dynamic styles to wrappers. When disableEvents 
       is true, mouse events will be disabled on someWrapper1
       and child descendants */
    return (<parent>
        <someWrapper1 style={wrapperStyle}>
            <child />
            <child />
        </someWrapper1>
        <someWrapper1 style={wrapperStyle}>
            <child />
            <child />
        </someWrapper1>
    </parent>)
}