Javascript 反应-如何防止子组件发生单击事件

在标记为重复之前，其差异。我有这样一个场景，我假设将一些非预定义的元素放入子组件中。在where中，当用户单击该元素时，会触发父元素事件。单击子对象时，如何停止父对象上的事件触发器？让我用下面的例子来解释更多-

因此，它基本上是一个手风琴式列表，通过单击每个项目标题div（

list-container\uuuuuuuuuuuuuuuuuuuuuuuuuu title

）将显示body div（

list-container\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

现在，在title div中，我有一个链接（
list-container\uuuuuu item\uuuuuuuuuu 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>
        );
    }

}

从“React”导入React；
类DiamondFilters.Component{
建造师（道具）{
超级（道具）；
此.state={
活动项：“”
};
}
handleItemToggle=（名称）=>{
if（this.state.activeItem===名称）{
this.setState（{activeItem:'}）
}否则{
this.setState（{activeItem:name}）
}
}
render（）{
返回(
this.handleItemToggle（'item1'）}>
点击这里1
《洛雷姆·伊普苏姆》中有很多不同的段落，但大多数都经历了某种形式的变化，比如注入幽默，或者随机的词语，这些词语看起来甚至一点都不可信

this.handleItemToggle（'item2'）}>
点击这里2
《洛雷姆·伊普苏姆》中有很多不同的段落，但大多数都经历了某种形式的变化，比如注入幽默，或者随机的词语，这些词语看起来甚至一点都不可信

);
}
}
如果您需要使用带有参数的回调来处理这些单击，您只需将事件添加为这些参数之一，并将调用移到回调中即可

handleItemTitleLinkClick = (e, foo, bar) => {
    e.stopPropagation();
    // do stuff
}

...

<a className="list-container__item____title--link" onClick={e => handleItemTitleLinkClick(e, "whatever", "args")}>Click Here 1</a>

handleItemTitleLinkClick=（e、foo、bar）=>{
e、 停止传播（）；
//做事
}
...
HandleItemTitleLink单击（e，“任意”、“参数”）}>单击此处1
如果您需要使用带有参数的回调来处理这些单击，您只需将事件添加为这些参数之一，并将调用移到回调中即可

handleItemTitleLinkClick = (e, foo, bar) => {
    e.stopPropagation();
    // do stuff
}

...

<a className="list-container__item____title--link" onClick={e => handleItemTitleLinkClick(e, "whatever", "args")}>Click Here 1</a>

handleItemTitleLinkClick=（e、foo、bar）=>{
e、 停止传播（）；
//做事
}
...
HandleItemTitleLink单击（e，“任意”、“参数”）}>单击此处1
另一种可能的解决方案是将
Overlymodal
组件移到可折叠的外部。这样，在模态上进行的任何单击都不会调用与可折叠对象关联的单击处理程序

  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>
            </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>
            </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>
          <OverlayModal modalType="full" modalName={this.state.activeItem} />
        </div>
      </div>
    );
  }

render（）{
返回(
this.handleItemToggle（“item1”）}
>
点击这里1

Lorem Ipsum的段落有很多变体，
但大多数人都经历了某种形式的改变，比如
注入的幽默，或随机的词，看起来不均匀
稍微可信。

this.handleItemToggle（“item2”）}
>
点击这里2

Lorem Ipsum的段落有很多变体，
但大多数人都经历了某种形式的改变，比如
注入的幽默，或随机的词，看起来不均匀
稍微可信。

);
}
另一种可能的解决方案是将
Overlymodal
组件移到可折叠的外部。这样，在模态上进行的任何单击都不会调用与可折叠对象关联的单击处理程序

  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>
            </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>
            </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>
          <OverlayModal modalType="full" modalName={this.state.activeItem} />
        </div>
      </div>
    );
  }

render（）{
返回(
this.handleItemToggle（“item1”）}
>
点击这里1

Lorem Ipsum的段落有很多变体，
但大多数人都经历了某种形式的改变，比如
注入的幽默，或随机的词，看起来不均匀
稍微可信。

this.handleItemToggle（“item2”）}
>
点击这里2

Lorem Ipsum的段落有很多变体，
但大多数人都经历了某种形式的改变，比如
注入的幽默，或随机的词，看起来不均匀
稍微可信。

);
}
您可以将您的
overlymodal
包装到另一个组件中（单击