Question

我有一个div，在内部我根据某些条件渲染跨度。如果组件有一些子代，我希望这个div扩大。如果我在内部跨度之外的区域上单击此div，则效果很好。

下面的Image是一个示例。单击该行时，它将扩展区域以显示诸如this之类的项目。但是，当我单击标题文本时，它不起作用，因此不会触发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

我怀疑您正在尝试使用event.target中的selectHeader值来做某事。这不会很好，因为event.target会根据您在div中单击的元素而改变。它并不总是外部的“父”元素。

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

抛弃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

单击包含范围的div不会触发onclick事件-React

3 个答案: