材质 UI 选项卡内的功能未触发答案

【问题标题】：Function inside Material UI Tabs not firing材质 UI 选项卡内的功能未触发
【发布时间】：2019-02-03 23:36:37
【问题描述】：

我无法重现该问题，但我尝试了。我有一个 Material UI 元素，其中添加了一个子元素。图标/孩子是角落里的 X。选项卡/父项是周围的框。

两个问题：

我想点击孩子，但父母完全覆盖了它，孩子没有被点击。
即使单击它，它也在Tab 图标字段内，这似乎会破坏单击。

handleIconClick(){
      console.log('click')
  }
renderIcon() {
  return (
    <div
      tabIndex="-1"
      className="icon-wrapper"
      onClick={this.handleIconClick.bind(this)}
    >
      <Icon />
    </div>
  );
}
...

<Tab icon={this.renderIcon} onMouseMove={this.mouseEvent.bind(this)} label={tab.label} key={i}></Tab>})}

我尝试通过使用上面Tab 上的onMouseMove 事件来解决这个问题。

如图所示，将子项定位在父项的上角。
当光标靠近角落中的孩子时，手动定位孩子。（x & y 值是任意的，特定于这种情况）

function mouseEvent(e) {
 var rect = e.target.getBoundingClientRect();
 var x = e.clientX - rect.left; //x position within the element.
 var y = e.clientY - rect.top;  //y position within the element.
 let trigger = document.querySelector('.icon-wrapper')
 let parent = document.querySelector('.MuiButtonBase-root-59')
 if(y <= 27 && x >= 60){
     trigger.focus()
 } else {
     trigger.blur()
 }
}

如果我将图标从选项卡移到它开始工作的页面上，~~所以我不知道是父级阻止它，还是Tab 图标字段导致问题。~~

当我进入上述坐标范围时，焦点会在视觉上出现，但点击不会触发。当鼠标悬停在带有上述鼠标悬停事件的图标上时，似乎鼠标只能访问父级，我正在记录 console.log(document.activeElement.className) 和 close-icon 出现，这是正确的。所以看起来它是没有触发的功能。

我需要能够单击该选项卡，因为它有自己的单击处理程序（未显示），因此它不能被禁用。 ~~我还没有找到在这些字段之外添加到Tab 的方法，但是如果可能的话有可能这就是答案。~~

我真正想做的是在点击时关闭标签，这看起来很基本。

【问题讨论】：

标签： css material-ui

【解决方案1】：

您必须使用onChange 函数的处理程序，并读取e.target。如果 e.target 来自 CloseIcon - e.preventDefault(); 我的意思是：

handleTabChange(e, tab) {

    if (e.target.tagName !== 'DIV') { // Our label wrapped by div tag, so, if it isn't true - click made to specific buttons or icons and etc...
      e.preventDefault();
    }

    const { onTabChange } = this.props;
    onTabChange(tab);
  }

【讨论】：

【解决方案2】：

我无法克服材质 UI 问题，但我通过单击选项卡/父级本身解决了它，并且只是通过在鼠标进入图标区域时将状态变量设置为 true 来模拟图标，而 false除此以外。悬停在图标的开/关会切换变量。

if(y <= 27 && x >= 60){
        // let trigger = document.querySelector('.material-icons.MuiIcon-root-65')
        this.setState({hovered: true})
    } else {
        this.setState({hovered: false})
    }
}

如果它是真的，那么点击就会触发。

handleIconClick(){
      if(!this.state.hovered){
          return
      }
      console.log('click')
  }

所以图标永远不会被点击，只有父级的角落。

【讨论】：