Функция внутри Material UI Вкладки не работают - PullRequest
Новая
       10

Функция внутри Material UI Вкладки не работают

0 голосов
/ 04 февраля 2019

Я не мог воспроизвести проблему, но я пытался.У меня есть элемент Material UI с дочерним элементом, который я добавил в него.Значок / ребенок - это крестик в углу.Вкладка / родитель - это окружающее поле.

tabs

Две проблемы:

  1. Я хочу щелкнуть по дочернему элементу, но родитель полностью его закрывает иребенок не получает щелчок.
  2. Даже если щелкнуть по нему, оно находится внутри поля значка 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>})}

Я пытался решить эту проблему, используя событие onMouseMove на Tab выше, используя его следующим образом.

  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, вызывающий проблему.

Фокус отображается визуально, когда я попадаю в диапазон вышеуказанных координат, нощелчок никогда не срабатывает.Кажется, что мышь имеет доступ только к родительскому элементу, но при наведении указателя мыши на значок с указанным выше событием указателя мыши я регистрирую console.log(document.activeElement.className) и появляется close-icon, и это правильно.Итак, похоже, что эта функция не стреляет.

Мне нужно иметь возможность щелкать вкладку, поскольку она имеет собственный обработчик щелчков (не показан), поэтому его нельзя отключить. Я не нашел способа добавить к Tab за пределами этих полей, однако, если это возможно, возможно, это может быть ответ.

Действительно, я хочу сделать, этозакройте вкладку, которая кажется довольно простой.

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Вы должны использовать обработчик функции 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);
  }
0 голосов
/ 04 февраля 2019

Мне не удалось преодолеть материальную проблему пользовательского интерфейса, но я решил ее, используя щелчок на самой вкладке / родительском элементе, и просто смоделировал значок, установив для переменной состояния значение 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})
    }
}

Если значение равно true, щелчок сработает.

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

Таким образом, значок никогда не нажимается, только угол родительского элемента.

...