To programmatically trigger a click event in React, you can use the useRef hook to reference a DOM element or component, and then call its .click() method.
Here’s a complete example:
Example: Programmatically triggering a button click
import React, { useRef } from 'react';
function App() {
const buttonRef = useRef(null);
const handleClick = () => {
alert('Button was clicked!');
};
const triggerClick = () => {
if (buttonRef.current) {
buttonRef.current.click(); // Programmatically triggers the click
}
};
return (
<div>
<button ref={buttonRef} onClick={handleClick}>
Click Me
</button>
<button onClick={triggerClick}>
Trigger Click Programmatically
</button>
</div>
);
}
export default App;
Explanation:
useRef(null)creates a reference to the first button.ref={buttonRef}attaches the reference to the actual button DOM element.- When the second button is clicked, it programmatically triggers
.click()on the referenced button.
