Reactで右クリックを扱う

2016/05/08 22:49:35

ReactにはonContextMenuが用意されているので楽です。

  render() {
    let onClick = (e, isRight?)=> {
      e.preventDefault();
      if(isRight){
        // 右クリック
      }else{
        // 左クリック
      }
    };

    return <div
      onClick={(e)=> onClick(e)}
      onContextMenu={(e)=> onClick(e, true)}>
      何か
    </div>
  }

ただしonMouseDownでは、左クリックも右クリックでもonMouseDownがよばれますので、こうします。

  render() {
    let onPress = (e)=> {
      let isRight = e.nativeEvent.which === 3;
      if(isRight){
        // 右クリック
      }else{
        // 左クリック
      }
    };

    return <div onMouseDown={(e)=> onPress(e)}>
      何か
    </div>
  }

まちがってonContextMenuとonMouseDownを組みあわせると、右クリックだけ複数回呼ばれることになります。