2
我試圖觸發觸摸龍頭上的課程。使用onClick,它可以在桌面上正常工作,但使用onTap/onTouchStart/onTouchEnd時,事件不會被觸發。在渲染組件之前,我運行了React.initializeTouchEvents(true)
。 clickhandler位於div
元素上,我已設置cursor: pointer
。我正在使用一個lonovo yoga 2 pro和一個iPad進行測試。另外我使用react router。 任何人都有一個想法,爲什麼它不工作?Reactjs touchevents無法正常工作
初始化:
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>
)
}
})