我正在具有onClick
和disabled
属性的React组件中使用<button>
。onButtonClick
操作和isButtonDisabled
变量是从存储中检索的isButtonDisabled
选择器包括一些逻辑来确定是否应该禁用按钮,我的期望是React组件将使用此变量禁用按钮,并且只在按钮未禁用时调用onClick,但也有可能在按钮应该禁用时组件也没有禁用按钮而调用onButtonClick
。
这就提出了一个问题:我是否应该在onButtonClick
操作中运行相同的逻辑,并检查是否应该禁用按钮,如果按钮被禁用,我是否应该简单地提前返回,什么也不做?
当我们忘记设置按钮的disabled
属性并执行该操作时,这将非常有用。我是否需要运行相同的逻辑来计算按钮是否应该在操作中再次禁用,或者是否足以信任组件设置为禁用并在按钮上使用isButtonDisabled
?
export const Component: React.FC = () => {
// Zustand store, it calls a selector that runs some logic.
const isBtnDisabled = useAppState(`isBtnDisabled`);
const { onBtnClick } = useActions();
return (
<Button onClick={onBtnClick} isDisabled={isBtnDisabled}>
Delete Layer
</Button>
);
}
1条答案
按热度按时间iezvtpos1#
你可以信任react为你禁用按钮。
但是不要忘记去掉HTML的
disable
属性是非常容易的,现在任何一个青少年都知道如何打开HTML元素并删除disable
属性。所以如果你的onClick函数很重要,保护它可能是一个很好的选择,显然这取决于你计划部署在什么环境中。