Определение того, был ли сделан щелчок по левой или правой стороне div в реакции

Question

Привет, ребята, у меня есть div в реакции, где мне нужно узнать, был ли сделан щелчок по левой или правой стороне div. До сих пор я использовал jquery, но я понял, что лучше избегать jquery с реакцией. Итак, любое решение этой проблемы без использования jquery, поскольку я новичок в реакционной стороне?

Это было то, что я делал с помощью jquery

HTML

<div onClick={()=>this.calcClick()}>....</div>

JS

calcCLick = () => {
  var position = ""
  $("div").click(function (e) {
    var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders
    var pOffset = $(this).offset();
    var x = e.pageX - pOffset.left;
    // console.log(pWidth, pOffset, x);
    if (pWidth / 2 > x) {
      console.log("left");
      position = "left"

    }
    //  $(this).text('left');
    else {
      console.log("right");
      position = "right"
    }
  })

Answer 1

Для этого вы можете использовать хук useRef самого React и getBoundClientRect (). Width, чтобы получить ширину div, как сказал Крис в комментарии выше.

После этого вы можете получить положение мыши в div с nativeEvent события.

Отметьте эту песочницу, если вам нужен пример