Получить идентификатор при нажатии кнопки «Получить идентификатор» в React

В React при нажатии кнопки «получить идентификатор» существует несколько методов, которые вы можете использовать для обработки события и получения идентификатора. Вот несколько подходов:

  1. Состояние использования: вы можете сохранить идентификатор в состоянии компонента и обновлять его при нажатии кнопки. Например:
import React, { useState } from 'react';
function MyComponent() {
  const [id, setId] = useState('');
  const handleButtonClick = () => {
    // Retrieve the ID here
    const retrievedId = // Code to retrieve the ID
    setId(retrievedId);
  };
  return (
    <div>
      <button onClick={handleButtonClick}>Get ID</button>
      <p>Retrieved ID: {id}</p>
    </div>
  );
}
  1. Использование ссылок: вы можете использовать ссылки для доступа к элементу DOM, представляющему кнопку, и получения от него идентификатора. Вот пример:
import React, { useRef } from 'react';
function MyComponent() {
  const buttonRef = useRef(null);
  const handleButtonClick = () => {
    // Retrieve the ID here
    const retrievedId = buttonRef.current.id;
    console.log(retrievedId);
  };
  return (
    <div>
      <button ref={buttonRef} id="exampleId">Get ID</button>
      <button onClick={handleButtonClick}>Get ID</button>
    </div>
  );
}
  1. Использование объекта события: вы можете получить доступ к объекту события, переданному обработчику события щелчка, и извлечь идентификатор из целевого элемента. Вот пример:
import React from 'react';
function handleButtonClick(event) {
  // Retrieve the ID here
  const retrievedId = event.target.id;
  console.log(retrievedId);
}
function MyComponent() {
  return (
    <div>
      <button id="exampleId" onClick={handleButtonClick}>Get ID</button>
    </div>
  );
}