React中按钮启用后onClick函数无法触发问题求助

问题原因 #

你在JSX里给按钮设置了disabled={true}，这会让React将该属性视为受控属性——React会始终用虚拟DOM的状态来同步真实DOM。当你通过ref直接修改真实DOM的disabled值时，React内部并没有同步这个状态，不仅可能在组件重渲染时把disabled强制改回初始值，还会导致React的事件系统无法正确绑定点击逻辑，最终出现按钮启用后onClick不执行的情况。

解决方案 #

移除JSX中按钮的disabled={true}声明，改用useEffect在组件挂载时初始化按钮的禁用状态，让React不再管控这个属性，完全通过ref操作DOM：

import { useRef, useEffect } from 'react';

const refText = useRef(null);
const refBtn = useRef(null);

// 组件挂载时初始化按钮为禁用状态
useEffect(() => {
  if (refBtn.current) {
    refBtn.current.disabled = true;
  }
}, []);

function handleBtnStatus(e) {
    let text = e.target.value;
    if(text.replace(/\s/g, "").length > 0) {
        refBtn.current.disabled = false;
    }
    else {
        refBtn.current.disabled = true;
    }
}

function postThis() {
    console.log("You posted! Text:", refText.current.value);

    // 再次禁用按钮
    refBtn.current.disabled = true;

    // 清空输入框内容
    refText.current.value = "";
}

return (
    <>
        {isLogged && (
            <div className="container">
                <div className="content">
                    <div className="utool-item-text">
                        <textarea name="textArea" placeholder="Write something.." ref={refText} onChange={(e) => handleBtnStatus(e)}></textarea>
                    </div>
                    <div className="utool-item-post">
                        {/* 移除disabled={true}，由useEffect初始化状态 */}
                        <button className="ust-btn-post" ref={refBtn} onClick={postThis}>Da Tweet</button>
                    </div>
                </div>
                <div className="posts-section">
                    <div className="list-posts">
                        {posts.map((p) => {
                            return p.hidden === false ? (
                                <div className="post" key={p.id}>
                                    <div className="post-text">
                                        <span>{p.text}</span>
                                    </div>
                                </div>
                            ) : null
                        })}
                    </div>
                </div>
            </div>
        )}
    </>
)

说明 #

这种方式完全通过DOM操作控制按钮状态，不会触发组件重渲染，满足你不想因状态更新导致重渲染的需求。同时，因为React不再管控按钮的disabled属性，你的ref操作不会和React的虚拟DOM状态冲突，点击事件就能正常执行了。

内容的提问来源于stack exchange，提问作者Galbert