在功能反应中，如何自动模拟组件渲染后立即按下按钮

Question

那么让我们假设组件中有一些可点击的小部件？如何告诉窗口在组件渲染后立即自动单击该小部件？

Answer 1

您可以使用hooks对ref执行此操作

import React, {useRef} from 'react';
const MyComponent = () => {
const myBtnRef= useRef(null);
useEffect(()=>{
myBtnRef.click();
}, []}
return (
<button ref={myBtnRef}>Click Me</button>
);
}

Answer 2

如果每次渲染后都要单击该按钮，最简单的方法是

<button ref={() => console.log(`clicked`)}>Button</button>

您可以在回调中添加debounce，以避免重复调用。

如果希望在每次安装后点击该按钮，请使用useEffect和useRef挂钩。

const Containerr = () => {
const btnRef = useRef(null)

useEffect(() => {
ref.current.click()
}, [])
return (
<button ref={btnRef}>Button</button>
)
}

Answer 3

好吧，只在一行中，但必须在可点击元素上。

useEffect(()=>{
document.getElementById('Id').click();
}, []}