Javascript ReactJS onClick不适用于按钮，onClick内的函数未被调用

这是按钮标记和onclick功能：

<Button
  id="save-btn"
  className="btn-save"
  disabled={true}
  onClick={handleSaveBtnClick}
  >
   Save
</Button>

const handleSaveBtnClick = () => {console.log("testing")}

如果我删除禁用的选项，那么按钮工作正常，但我需要禁用它，除非单击编辑按钮。

---

这里可能出了什么问题？我已经尝试了大多数方法

您在if条件下使用赋值运算符使用等于

==

或

=

---

如果条件使用等于

==

或

=

，则使用赋值运算符

---

您的启用/禁用代码不是您使用React执行此操作的方式。不是直接操作DOM，而是在组件的状态中使用一个标志来确定按钮是否已启用，然后设置/清除该标志。当您的组件呈现时，使用标志来呈现

disabled

属性，如下所示（我使用的是

按钮而不是
按钮
，不知道您使用的几个lib中哪一个提供了
按钮
组件）：


const{useState}=React；
函数示例（）{
const[saveEnabled，setSaveEnabled]=useState（true）；
const handleSaveBtnClick=（）=>{
控制台日志（“测试”）；
};
返回(
拯救
setSaveEnabled（f=>！f）}
/>
启用保存
);
}
render（，document.getElementById（“根”））
您的启用/禁用代码不是您使用React执行此操作的方式。不是直接操作DOM，而是在组件的状态中使用一个标志来确定按钮是否已启用，然后设置/清除该标志。当您的组件呈现时，使用标志来呈现
disabled
属性，如下所示（我使用的是
按钮而不是
按钮
，不知道您使用的几个lib中哪一个提供了
按钮
组件）：


const{useState}=React；
函数示例（）{
const[saveEnabled，setSaveEnabled]=useState（true）；
const handleSaveBtnClick=（）=>{
控制台日志（“测试”）；
};
返回(
拯救
setSaveEnabled（f=>！f）}
/>
启用保存
);
}
render（，document.getElementById（“根”））

您也可以使用“旧的”但很好的类组件方法，而不是像以前建议的那样使用函数式方法

在这种情况下，您将需要以下内容：


类示例扩展了React.Component{
状态={enabled:false}
HandleSaveBtclick=（）=>{
控制台日志（“测试”）；
};
handleEnableBtnClick=（）=>{
console.log（this.state）；
让newStatus=！this.state.enabled
this.setState（{enabled:newStatus}）
}
render（）{
返回(
拯救
启用保存
);
}
}
render（，document.getElementById（“根”））

您也可以使用“旧的”但很好的类组件方法，而不是像以前建议的那样使用函数式方法

在这种情况下，您将需要以下内容：


类示例扩展了React.Component{
状态={enabled:false}
HandleSaveBtclick=（）=>{
控制台日志（“测试”）；
};
handleEnableBtnClick=（）=>{
console.log（this.state）；
让newStatus=！this.state.enabled
this.setState（{enabled:newStatus}）
}
render（）{
返回(
拯救
启用保存
);
}
}
render（，document.getElementById（“根”））

请使用演示问题的工具更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX。请使用演示问题的工具更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX。虽然这里确实可以使用类组件，但这与问题无关。我完全不同意你的观点，Emily。很明显，他正在学习如何做出反应，他正处于第一阶段。我的答案和T.J.克劳德的答案一样解决了这个问题。它只是同一代码的另一个实现。为同一个问题提供多个解决方案总是更好的。此外，由于挂钩，功能解决方案在React版本<16.8上不起作用。因此，从我的观点来看，你不能断言它与问题无关。虽然这里确实可以使用类组件，但它与问题无关。我完全不同意你的观点，Emily。很明显，他正在学习如何做出反应，他正处于第一阶段。我的答案和T.J.克劳德的答案一样解决了这个问题。它只是同一代码的另一个实现。为同一个问题提供多个解决方案总是更好的。此外，由于挂钩，功能解决方案在React版本<16.8上不起作用。所以从我的观点来看，你不能断言这与问题无关。@Emile-谢谢，但请不要这样做。我使用两个空格缩进不是有原因的。我的目标是避免水平滚动，原因是什么，除了个人偏好之外？@EmileBergeron-Low vision。两个太空的东西是20多个东西强加给我们的一种可憎的东西。：-）实际上，我们都应该使用标签来实现可访问性（因为对于一些低视力的人来说，最好是一个空间和一个巨大的f
  const handleEditClick = (index) => {
// this is for input fields and it works fine:
        document.querySelectorAll(".card-" + index + " .toggle-edit-input").forEach((field) => {
          field.disabled = !field.disabled;
        });
// this piece of code does not work: 
       document.getElementById("save-btn").disabled = false;
        if (document.getElementById("save-btn").disabled = false) {
          document.getElementById("save-btn").onclick = handleSaveBtnClick;
        }
 };

 if (document.getElementById("save-btn").disabled === false) {
      document.getElementById("save-btn").onclick = handleSaveBtnClick;
    }