我正在尝试通过触摸触发课程。使用 onClick 它可以在桌面上正常工作,但使用 onTap / onTouchStart / onTouchEnd 事件不会被触发。我React.initializeTouchEvents(true)
在渲染组件之前运行。clickhandler 在一个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>
)
}
})