ReactJS中点击按钮触发onPress后禁用按钮失效如何解决

你的代码存在3个直接导致功能失效的问题：

• 函数定义语法错误：function disableButtonEG= () => {} 混合了普通函数声明和箭头函数赋值的写法，这段代码本身就会抛出语法异常，根本不会正常执行。
• 开发逻辑不符合React的核心规则：React是状态驱动的声明式框架，不允许直接修改DOM属性来更新UI，你写的button.disabled = true既没有正确获取到按钮的DOM节点，这种直接操作DOM的写法也不会触发React的视图重渲染，自然看不到效果。
• 你使用的是封装过的<Button>组件，这类组件的禁用状态必须通过组件暴露的disabled入参控制，直接操作内部DOM节点本身就不符合组件的使用规范。

用React内置的useState钩子管理按钮的禁用状态，把状态和组件的disabled属性绑定，点击时修改状态触发视图更新即可：

import { useState } from 'react';
// 按你项目里的实际路径引入Button组件、PrimaryColor常量即可

export default function ButtonDemo() {
  // 初始化按钮禁用状态：默认未禁用
  const [isDisabled, setIsDisabled] = useState(false);

  // 修正写法后的点击处理函数
  const disableButtonEG = () => {
    setIsDisabled(true);
  };

  return (
    <Button
      title="Press to disable"
      buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
      titleStyle={{fontSize:13}}
      // 绑定禁用状态到组件prop
      disabled={isDisabled}
      onPress={disableButtonEG}
    />
  );
}

• 如果后续需要实现「点击按钮发请求，请求过程中按钮禁用，请求结束后恢复可用」的效果，只需要在请求发起前把状态置为true，请求成功/失败的回调里把状态置回false即可。
• 所有和UI展示相关的可变值，都要放到state里管理，通过修改state驱动视图更新，不要在React业务代码里直接写原生DOM操作逻辑，这是React和原生JS/jQuery开发最核心的区别。

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