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

Как можно добавить маску для поля телефона с id="#billing_phone" на странице оформления заказа в WooCommerce, которая теперь отображается с использованием react-блоков вместо шорткода [woocommerce_checkout]? Что необходимо сделать, чтобы применить маску к динамически созданному элементу и заставить работать событие по фокусировке на нем?
  • 28 марта 2024 г. 14:09
Ответы на вопрос 1
Для добавления обработчика события для клика на динамически добавленные элементы в React, можно использовать делегирование событий. Например, можно добавить обработчик события на родительский элемент, который существует на момент загрузки страницы, и использовать условие для определения, на каком конкретно динамически добавленном элементе произошел клик.

Пример кода:

```jsx
class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    if (event.target.classList.contains('dynamic-element')) {
      console.log('Click on dynamic element');
    }
  }

  componentDidMount() {
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }

  render() {
    return (
      <div>
        <div className="dynamic-element">Dynamic Element</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

Чтобы добавить маску для поля телефона с id="#billing_phone" на странице оформления заказа в WooCommerce, можно воспользоваться плагином для маскирования ввода, например, InputMask. 

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

```jsx
class App extends React.Component {
  componentDidMount() {
    const input = document.getElementById('billing_phone');
    
    if (input) {
      const maskOptions = {
        mask: '+7 (999) 999-99-99'
      };
      
      const mask = new IMask(input, maskOptions);
      
      input.addEventListener('focus', () => {
        mask.updateValue();
      });
    }
  }

  render() {
    return (
      <div>
        <input type="text" id="billing_phone" />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

В данном примере мы применяем маску для поля с id="billing_phone" и обновляем ее значение при фокусировке на этом поле. Не забудьте подключить плагин для маскирования ввода перед использованием.
Похожие вопросы