Как обработать событие по клику для динамических элементов React?

Ссылка скопирована
JavaScript React WooСommerce
1 ответ

Раньше в woocommerce страница оформления заказа отображалась с помощью шорткода [woocommerce_checkout].
Теперь появилась возможность создавать с помощью блоков, которые созданы с помощью react.
В поле оформления заказа есть поле телефон с id="#billing_phone".
Раньше, чтобы добавить маску достаточно было кода:

$("#billing_phone").inputmask({ mask: "(999) 999-99-99", greedy: false });

$("#billing_phone").inputmask({ mask: "(999) 999-99-99", greedy: false });

Теперь для динамически созданных элементов на react это не действует.
Пробовал:

$(document).on('focus', '#billing_phone', function() {     alert('AUUUU!');  });

$(document).on('focus', '#billing_phone', function() { alert('AUUUU!'); });

Не срабатывает.

Прошу помощи у вас, как мне повесить событие или маску на данный динамический элемент.
Спасибо!

Дополнительно:

Что мешает по прежнему использовать шорткоды?
Блоки в WC находятся еще в зачаточном состоянии и пройдёт лет 10 пока их можно будет использовать в реальных проектах.

  • Refguser, мне ничего не мешает. А другому владельцу надо)
  • Александр Токмаков, тут всё просто - нужно убедить владельца, что ему это не надо (будет стоит как космолёт при этом никаких надёжности и перспектив работоспособности в будущем) :) Они прекрасно понимают язык денег.
  • Refguser, Я плагин пишу для wp и хотел бы исключить казусы.
    В описании четко написано, что с новыми блоками работать не будет, но кто читает описание?)))
    А потом: ой, верните деньги за плагин, я не знал!

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Андрей PHP Ответ

    Для обработки событий по клику для динамических элементов в React, вам нужно использовать делегирование событий или использовать библиотеку React.

    Давайте начнем с использования делегирования событий. Для этого вы можете добавить обработчик событий к родительскому элементу, который содержит все динамические элементы. Когда происходит клик на динамическом элементе, событие всплывает к родительскому элементу, где вы можете обработать его.

    Пример использования делегирования событий в React:

    class DynamicElement extends React.Component {
  handleClick = (event) => {
    if (event.target.tagName === 'BUTTON') {
      console.log('Кликнули на кнопку');
    }
  }
 
  render() {
    return (
      <div>
        {this.props.items.map(item =&gt; (
          <button>{item.name}</button>
        ))}
      </div>
    );
  }
}

    class DynamicElement extends React.Component { handleClick = (event) =&gt; { if (event.target.tagName === 'BUTTON') { console.log('Кликнули на кнопку'); } } render() { return ( <div> {this.props.items.map(item =&gt; ( <button>{item.name}</button> ))} </div> ); } }

    Если вы предпочитаете использовать библиотеку React, то вы можете использовать метод .on() для добавления обработчика событий к динамическим элементам.

    Пример использования React для обработки событий по клику для динамических элементов:

    class DynamicElement extends React.Component {
  componentDidMount() {
    $(document).on('click', 'button', function() {
      console.log('Кликнули на кнопку');
    });
  }
 
  render() {
    return (
      <div>
        {this.props.items.map(item =&gt; (
          <button>{item.name}</button>
        ))}
      </div>
    );
  }
}

    class DynamicElement extends React.Component { componentDidMount() { $(document).on('click', 'button', function() { console.log('Кликнули на кнопку'); }); } render() { return ( <div> {this.props.items.map(item =&gt; ( <button>{item.name}</button> ))} </div> ); } }

    Независимо от выбранного способа, помните, что обработка событий по клику для динамических элементов в React требует некоторых дополнительных усилий, но с правильным подходом вы сможете легко достичь желаемого результата.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

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

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов 1С Как выдать дефолтному пользователю 1С 8.3 право на загрузку XML? 0 ответов