反应 - material-ui 应用栏图标触摸事件不会触发

Question

当我单击元素 AppBar 时，左侧的图标应执行 _handleClick() 方法。我无法收到控制台消息。我正在使用 material-ui 框架，并且提供了 onLeftIconButtonTouchTap 属性，用于在通过触摸点击选择左侧图标时的回调函数。

import React, { Component } from 'react'
import { AppBar, IconButton } from 'material-ui'
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';

let injectTapEventPlugin = require("react-tap-event-plugin");

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();


class Header extends Component {
  constructor(props) {
    super(props);
    this._handleClick = this._handleClick.bind(this);
  }

  _handleClick(e) {
    e.preventDefault();
    // Show/Hide the LeftMenu
    window.console.log("Click!");
  }

  render() {
       return (
        <AppBar title="Arasaaccc"
                iconElementLeft={ <IconButton>
                                    <MoreVertIcon/>
                                  </IconButton> }
                onLeftIconButtonTouchTap={ this._handleClick }
                isInitiallyOpen={ true } />


      )
  }
}

export default Header

但是它适用于另一个组件：

class Prueba extends Component {
  constructor(props) {
    super(props);
    this._handleClick = this._handleClick.bind(this);
  }

  _handleClick(e) {
    e.preventDefault();
    window.console.log("Click!");
  }
  render (){
    return (
      <h1 onClick={this._handleClick}>Prueba Prueba Prueba</h1>
      )
  }
}
export default Prueba;

Answer 1

我看不出您的代码有任何问题，所以我猜您需要 React-Tap-Event-Plugin。文档说这种依赖是暂时的，一旦 react v1.0 发布就会消失。

Answer 2

如果您为 AppBar 组件指定图标，onLeftIconButtonTouchTap 事件将不起作用。要么你不指定图标：

<AppBar title="Arasaaccc" 
         onLeftIconButtonTouchTap={ this._handleClick }
                            isInitiallyOpen={ true } />

或者您在 IconButton 组件上应用该事件：

<AppBar title="Arasaaccc"
        iconElementLeft={ <IconButton onTouchTap={ this._handleClick }  >
                            <MoreVertIcon />
                          </IconButton> }
        isInitiallyOpen={ true } />

编辑： 注意，按照这个GitHub issue，应该可以解决问题。您仍然不能在 iconElementLeft 和 onLeftIconButtonTouchTap 上同时使用 _handleClick，无论是其中之一。

反应 - material-ui 应用栏图标触摸事件不会触发

react - material-ui appbar icon touch event doesn't fire

reactjs

material-ui