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'));

Antworten auf die Frage(3)

Ihre Antwort auf die Frage