单击包含span的div，不会触发onclick事件 - React

Question

我有一个div，在里面我根据某些条件渲染范围。 如果该组件有一些孩子，我希望这个div扩展。 如果我在内跨区域外的区域上单击此div，它可以正常工作。

一个例子，是下面的图像 。 单击该行时，它会展开区域以显示此类项目。 但是，当我单击标题文本时，它不起作用，on click事件不会触发。

这是我的代码：

 <div className={headerStyles.header} onClick={(e) => this.selectHeader(e, this.props.items.length)}>
    {this.props.items.length > 0 && 
          <span className={headerStyles.expand} style={{ color: this.props.headerNameColor }}></span>
                    }
          <span style={{ color: this.props.headerNameColor }}  >{this.props.headerName}</span>
                    {this.props.headerUrl &&
                        <a
                            style={{ color: this.props.headerNameColor }}
                            href={this.props.headerUrl}
                            data-interception="off"
                            target="_blank"
                            title="Open link in a new tab">
                            <i className={['ms-Icon', 'ms-Icon--OpenInNewWindow', headerStyles.openNewTab].join(' ')}></i>
                        </a>
                    }
                </div>

这是单击标题时调用的函数：

 selectHeader(e, numOfItems) {
        if (e.target.children.length > 0 && numOfItems > 0) {
            e.target.children[0].classList.toggle(headerStyles.expand)
            e.target.children[0].classList.toggle(headerStyles.collapse)
            e.target.parentElement.querySelector(`.${headerStyles.items}`).classList.toggle(headerStyles.hidden)
        }
        else if(this.props.headerUrl){

        }
    }

任何指导表示赞赏。

谢谢

Answer 1

我怀疑你正在尝试使用selectHeader的event.target值。 这将无法正常工作，因为event.target将根据您在div中单击的元素而改变。 它并不总是外部的“父”元素。

您还试图从DOM中强制读取数据，这不是一种非常“反应”的做事方式。 实际上，在你的函数中你正在做一个classList.toggle(headerStyles.hidden) ，这与React管理应用程序的状态和呈现有直接冲突。 您需要的所有数据都应该在React应用程序的状态内 - 您根本不需要查询DOM。

Ditch event.target和classList.toggle并找到一种使用React状态的方法。 例如，当您单击div时，您只需切换组件的“展开”状态，并使用该状态来确定要呈现的CSS类：

<div onClick={() => {this.setState({isExpanded: !this.state.isExpanded})}} >
  <span className={this.state.isExpanded ? headerStyles.expand : headerStyles.collapse} ></span>
</div>

Answer 2

避免在JSX中使用箭头函数。 e对象总是被传递，因为这是一个事件处理程序，你的props可以从你的处理程序访问：

selectHeader = (e) => {
     const numOfItems = this.props.items.length;
     // rest of the code...

 }

内部渲染方法：

<div onClick={this.selectHeader}>

Answer 3

尝试将pointerEvents: 'none'样式添加到span标记中，这样就不会获得任何鼠标事件。 这将使event.target始终为div