I am trying to trigger a class on touch tap. With onClick it works fine on desktop, but with onTap / onTouchStart / onTouchEnd the event does not get fired. I run React.initializeTouchEvents(true)
before I render the components. The clickhandler is on a div
element and I have set cursor: pointer
. I am using a lonovo yoga 2 pro and an iPad for testing. In addition I use the react router.
Anyone has an idea why it is not working?
Init:
React.initializeTouchEvents(true)
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler data={dummyData} />, document.getElementById('app'));
});
Component:
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>
)
}
})
According to http://facebook.github.io/react/docs/events.html
React does not have an onTap
event listener.
Thus for onTap
you might want to try to bind the onTap event on componentDidMount lifecycle, as done in http://facebook.github.io/react/tips/dom-event-listeners.html