材质UI选项卡内的功能未触发 [英] Function inside Material UI Tabs not firing

问题描述

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

I could not reproduce the problem but I tried to. I have a Material UI element with a child I've added inside it. The icon/child is the X in the corner. The tab/parent is the surrounding box.

两个问题:

1. 我想单击孩子，但是父母完全覆盖了孩子，孩子没有被点击.
2. 即使单击，它也位于 Tab 图标字段中，这似乎仍然会干扰点击.

1. I want to click on the child but the parent covers it entirely and the child is not getting clicked.
2. Even if it is clicked, it's inside the Tab icon field and this seems to disrupt the click anyway.

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 事件来解决此问题.

I tried to solve this by using the onMouseMove event on the Tab above by using it like so.

1. 将孩子放置在父母的右上角，如图所示.
2. 当光标移到角落里的孩子附近时，用它手动瞄准孩子.(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 导致问题的图标字段.

If I move the Icon out of the tab onto the page it begins to work, so I don't know if it is the parent that is blocking it, or if it's the Tab icon field causing the problem.

当我处于上述坐标范围内时，焦点将以视觉方式显示，但单击不会触发.似乎鼠标仅具有访问父级的权限，而在上述鼠标悬停事件上悬停图标时，我正在记录 console.log(document.activeElement.className)和 close-icon出现，这是正确的.因此，似乎没有触发该功能.

The focus appears visually when I get in the range of the above coords but the click never fires. It seems like the mouse only has access to the parent yet when mousing over the icon with the above mouseover event I'm logging console.log(document.activeElement.className) and close-icon appears, which is correct. So then it seems like it's the function that is not firing.

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

I need to be able to click the tab as it has its own click handler (not shown), so it cannot be disabled. I haven't found a way to add to the Tab outside of these fields, however if it's possible it is possible it could be the answer.

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

Really I want to do is close the tab on click which seems like something pretty basic.

推荐答案

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

you have to use a handler of onChange function, and read e.target. If e.target from CloseIcon - e.preventDefault(); What I mean:

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);
  }

这篇关于材质UI选项卡内的功能未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！