Javascript 为什么“反应”按钮在单击时不调用函数

当我将

按钮的禁用状态从true改为false时，我的onClick被搞乱了，为什么会这样，如何解决


const组件=（）=>{
const reference=React.useRef（null）
设置超时（（）=>{
reference.current.disabled=false
}, 1000);
const handleClick=（）=>console.log（'单击'）
返回(
点击我
)
}
ReactDOM.render(
,
document.getElementById（“根”）
);
问题
这里的问题是React ref正在改变DOM，但React没有意识到这一点，因此
组件
不会通过允许
onClick
事件通过的工作按钮重新提交。这就是React中直接DOM操作被认为是反模式的主要原因

此外，您正在设置每次渲染时发生的超时，尽管这会产生最小的影响，但这仍然是不必要的，并且会被视为无意的副作用

解决方案
在挂载
useffect
hook中使用组件状态和更新状态来触发重新加载

const Component = () => {
  const [isDisabled, setIsDisabled] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsDisabled(false);
    }, 1000);
  }, []);
  
  const handleClick = () => console.log('clicked');
  
  return (
    <div>
      <button onClick={handleClick} disabled={isDisabled}>click me</button>
    </div>
  )
}

const组件=（）=>{
const[isDisabled，setIsDisabled]=useState（true）；
useffect（（）=>{
设置超时（（）=>{
setIsDisabled（假）；
}, 1000);
}, []);
const handleClick=（）=>console.log（'clicked'）；
返回(
点击我
)
}


const组件=（）=>{
const[isDisabled，setIsDisabled]=React.useState（true）；
React.useffect（（）=>{
设置超时（（）=>{
setIsDisabled（假）；
}, 1000);
}, []);
const handleClick=（）=>console.log（'clicked'）；
返回(
点击我
)
};
ReactDOM.render(
,
document.getElementById（“根”）
);

这是否回答了您的问题？该按钮已禁用，因此无法单击。您的意思是有条件地禁用按钮吗？@drewrese问题是，如果通过ref手动重新启用onClick回调，则不会注册它。