javascript - React-如何防止子组件发生点击事件

在标记为重复之前，其与众不同。我有这种情况，我想将一些未预定义的元素放入子组件中。当用户单击该元素时，将在该位置触发父元素事件。单击子项后，如何停止父项上的事件触发器？让我用以下示例进行更多说明：

因此，这基本上是一个手风琴列表，通过单击主体div（list-container__item____title）将显示的每个项目标题div（list-container__item____body）。

现在，在标题div中，我有一个链接（list-container__item____title--link），该链接打开一个覆盖图（子组件）。叠加层内容来自API调用，其中包含HTML。我无法为该元素添加更多功能，因为我不知道其中包含什么，它基于用户的选择。如果HTML中有一些可单击的元素（如锚，按钮等），则状态（activeItem）将更新为空（''）值。结果是各个项目都折叠了。有什么办法可以防止此事件发生？

import React from 'react';

class DiamondFilters extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            activeItem: ''
        };
    }

    handleItemToggle = (name) => {
        if (this.state.activeItem === name) {
            this.setState({ activeItem: '' })
        } else {
            this.setState({ activeItem: name })
        }
    }

    render() {
        return (
            <div className="menu">
                <div className="list-container">
                    <div className={`list-container__item ${this.state.activeItem === "item1" ? 'active' : ''}`}>
                        <div className="list-container__item____title" onClick={() => this.handleItemToggle('item1')}>
                            <a className="list-container__item____title--link">Click Here 1</a>
                            <OverlayModal modalType="full" modalName="item1" />
                        </div>
                        <div className="list-container__item____body">
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                        </div>
                    </div>
                    <div className={`list-container__item ${this.state.activeItem === "item2" ? 'active' : ''}`}>
                        <div className="list-container__item____title" onClick={() => this.handleItemToggle('item2')}>
                            <a className="list-container__item____title--link">Click Here 2</a>
                            <OverlayModal modalType="full" modalName="item2" />
                        </div>
                        <div className="list-container__item____body">
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

最佳答案

您可以将OverlayModal包装在另一个组件中（“ Click Muncher”），以防止任何点击冒泡：

const ClickMuncher = ({ children }) => {
  return <div onClick={e => e.stopPropagation()}>{children}</div>;
};

并像这样使用它：

<div className="list-container__item____title" onClick={() => this.handleItemToggle('item1')}>
  <a className="list-container__item____title--link">Click Here 1</a>
  <ClickMuncher>
      <OverlayModal modalType="full" modalName="item1" />
  </ClickMuncher>
</div>