В React при нажатии кнопки «получить идентификатор» существует несколько методов, которые вы можете использовать для обработки события и получения идентификатора. Вот несколько подходов:
- Состояние использования: вы можете сохранить идентификатор в состоянии компонента и обновлять его при нажатии кнопки. Например:
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>
);
}
- Использование ссылок: вы можете использовать ссылки для доступа к элементу 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>
);
}
- Использование объекта события: вы можете получить доступ к объекту события, переданному обработчику события щелчка, и извлечь идентификатор из целевого элемента. Вот пример:
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>
);
}