onClick funktioniert, aber onDoubleClick wird bei React component @ ignorie
Ich erstelle ein Minesweeper-Spiel mit React und möchte eine andere Aktion ausführen, wenn auf eine Zelle ein Einzel- oder Doppelklick ausgeführt wird. Derzeit ist dasonDoubleClick
-Funktion wird niemals ausgelöst, die Warnung vononClick
wird gezeigt. Wenn ich das @ entferonClick
handler,onDoubleClick
funktioniert. Warum funktionieren beide Events nicht? Ist es möglich, beide Ereignisse für ein Element zu haben?
/** @jsx React.DOM */
var Mine = React.createClass({
render: function(){
return (
<div className="mineBox" id={this.props.id} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}></div>
)
}
});
var MineRow = React.createClass({
render: function(){
var width = this.props.width,
row = [];
for (var i = 0; i < width; i++){
row.push(<Mine id={String(this.props.row + i)} boxClass={this.props.boxClass} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}/>)
}
return (
<div>{row}</div>
)
}
})
var MineSweeper = React.createClass({
handleDoubleClick: function(){
alert('Double Clicked');
},
handleClick: function(){
alert('Single Clicked');
},
render: function(){
var height = this.props.height,
table = [];
for (var i = 0; i < height; i++){
table.push(<MineRow width={this.props.width} row={String.fromCharCode(97 + i)} onDoubleClick={this.handleDoubleClick} onClick={this.handleClick}/>)
}
return (
<div>{table}</div>
)
}
})
var bombs = ['a0', 'b1', 'c2'];
React.renderComponent(<MineSweeper height={5} width={5} bombs={bombs}/>, document.getElementById('content'));