как обрабатывать дочерние события reactjs?

#reactjs

Вопрос:

в обычном JS я могу сказать, const corners = document.querySelectorAll('.corner') тогда я могу добавить к нему прослушиватель событий.

Мой вопрос

Как я могу это сделать с помощью react?
Возможно ли добавить функцию в родительский <div> и запрограммировать ее на добавление прослушивателя событий для своих дочерних элементов

 import React, { useState } from 'react'
import '../css/style.css'

function Boxshape() {


      return (
            <div
                  className='item'>
                  <div className='box'>
                        <div
                              onMouseOver={() => console.log('mouse over element A')}
                              className='corner A'></div>
                        <div className='corner B'></div>
                        <div className='corner C'></div>
                        <div className='corner D'></div>
                  </div>
            </div>
      )
}

export default Boxshape

это мой css на всякий случай, если вы переносите

 
.item{
      height: 100px;
      width: 100px;
      position: absolute;
      background-color: aquamarine;
}
.corner{
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: black;
      z-index: 2;
}

.A{
      top:-1px;
      left: -1px;
      cursor: nw-resize;
}
.B{
      top:-1px;
      right: -1px;
      cursor: ne-resize;
}
.C{
      bottom:-1px;
      left: -1px;
      cursor: sw-resize;
}
.D{
      bottom:-1px;
      right: -1px;
      cursor: se-resize;
}

1. Вы можете воспользоваться обработкой событий и добавить прослушиватель событий в элемент общего предка всех элементов, к которым вы хотите добавить прослушиватель событий, а затем, используя объект Event , обработать событие соответствующим образом.

2. @Yousaf это действительно классная идея [ plnkr.co/edit/eiVixZwxlxFG9dyx?p=previewamp;preview] , но как их использовать form.onclick = function(){} без определения form ?

Ответ №1:

Да, вы можете присоединить onmouseover событие к родительскому и извлечь целевые объекты. Вот простой фрагмент HTML, но вы можете перевести его в React.

 function logCorner(e) {
  const targetClassNames = e.target.className;
  if (targetClassNames.includes('corner')) {
    console.log(`mouse over ${targetClassNames}`)
  }
}

 body {
  padding:2rem;
}
.item{
      height: 500px;
      width: 500px;
      position: absolute;
      background-color: aquamarine;
}

.corner{
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: black;
      z-index: 2;
}

.A{
      top:0px;
      left: 0px;
      cursor: nw-resize;
}
.B{
      top:0px;
      right: 0px;
      cursor: ne-resize;
}
.C{
      bottom:0px;
      left: 0px;
      cursor: sw-resize;
}
.D{
      bottom:0px;
      right: 0px;
      cursor: se-resize;
}

 <div className='item'>
  <div class='box' onmouseover="logCorner(event)">
    <div class='corner A'></div>
    <div class='corner B'></div>
    <div class='corner C'></div>
    <div class='corner D'></div>
  </div>
</div>

В зависимости от того, насколько сложными становятся ваши угловые подразделения, вы можете использовать различные шаблоны.

Вот простой пример, который абстрагирует угловые подразделения в компонент Handle

 function Boxshape() {

  return (
    <div className='item'>
      <div className='box'>
        <Handle className="A" />
        <Handle className="B" />
        <Handle className="C" />
        <Handle className="D" />
      </div>
    </div>
  )
}

function Handle({className}) {

  const mouseOverHandler = () => {
    console.log(`mouse over: ${className}`)
  }

  return (
    <div
      onMouseOver={mouseOverHandler}
      className={`corner ${className}`}></div>
  )
}

export default Boxshape

1. Я не хочу активировать функцию каждый раз при наведении курсора мыши на поле div, я хочу активировать ее только при наведении курсора мыши на divs с именем класса corner

2. Отредактировано для проверки corner в именах классов. Но также смотрите мое дополнение об абстрагировании углов в их собственный компонент.

Ответ №2:

Да, вы можете передать событие в теге элемента, а затем создать функцию (вы сами выбираете название функции), а затем вы можете передать функцию в элемент, сказав это.

не делайте (), потому что мы регистрируем это только один раз при нажатии, также мы заключаем это в квадратные скобки, потому что это js-код, а не react.

 function handleClick() {
 console.log('Don't you dare click me lol')
};

<button onClick={handleClick}>I'm a button</button>