Reactjs触摸事件不起作用答案

【问题标题】：Reactjs touchevents not workingReactjs触摸事件不起作用
【发布时间】：2015-03-13 15:35:39
【问题描述】：

我正在尝试通过触摸触发类。使用 onClick 它可以在桌面上正常工作，但使用 onTap / onTouchStart / onTouchEnd 事件不会被触发。我在渲染组件之前运行React.initializeTouchEvents(true)。点击处理程序位于div 元素上，我设置了cursor: pointer。我正在使用 lonovo yoga 2 pro 和 iPad 进行测试。另外我使用react router。任何人都知道为什么它不起作用？

初始化：

React.initializeTouchEvents(true)
Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler data={dummyData} />, document.getElementById('app'));
});

组件：

var Transaction = React.createClass({
  getInitialState: function(){
    return ({showDetails: false})
  },
  toggleDetails: function(e){
    e.preventDefault()
    this.setState({showDetails: !this.state.showDetails})
  },
  render: function(){
    var itemClasses = "pl-transaction-item pl-transaction-status-"+this.props.data.status
    return (
      <li className={this.state.showDetails ? itemClasses + " pl-active" : itemClasses} >
        // here is the touch event listener
        <div className="pl-transaction-item-header" onTap={this.toggleDetails} onTouchEnd={this.toggleDetails}>
          <img src={this.props.data.img} alt="" /><span>name: {this.props.data.name}</span><span>status: {this.props.data.status}</span><span>date: {this.props.data.date}</span>
        </div>
        <div className="pl-transaction-item-details">
          <img src={this.props.data.img} alt="" />
          <ul>
            <li>name: {this.props.data.name}</li>
            <li>status: {this.props.data.status}</li>
            <li>date: {this.props.data.date}</li>
            <li><button>OK</button></li>
          </ul>
        </div>
      </li>
    )
  }
})

【问题讨论】：

标签： reactjs touch-event react-router

【解决方案1】：

根据http://facebook.github.io/react/docs/events.html React 没有 onTap 事件监听器。

因此对于onTap，您可能想尝试在 componentDidMount 生命周期中绑定 onTap 事件，就像在 http://facebook.github.io/react/tips/dom-event-listeners.html 中所做的那样

【讨论】：