英文:
Should I validate whether the button is disabled or not in onButtonClick action, or do I trust a React Component to disable the button?
问题
我在一个React组件中使用了<button>，它具有onClick和disabled属性。onButtonClick操作和isButtonDisabled变量都是从存储中检索的（我使用Zustand）。isButtonDisabled选择器包括一些逻辑，用于确定按钮是否应该被禁用。我期望React组件将使用这个变量来禁用按钮，并且只有在按钮未被禁用时才调用onClick。然而，有可能组件可能不会禁用按钮，并且即使按钮应该被禁用时也调用onButtonClick。
这引发了一个问题，即我是否应该在onButtonClick操作中运行相同的逻辑并检查按钮是否应该被禁用。如果按钮被禁用，我是否应该提前返回并什么都不做？
在我们忘记在按钮上设置disabled属性并执行该操作的情况下，这将非常有用。我是否需要在操作中再次运行计算按钮是否应该被禁用的相同逻辑，或者是否可以信任组件来设置禁用并在按钮上使用isButtonDisabled？
export const Component: React.FC = () => {
// Zustand存储，它调用一个运行一些逻辑的选择器。
const isBtnDisabled = useAppState(`isBtnDisabled`);
const { onBtnClick } = useActions();
return (
<Button onClick={onBtnClick} isDisabled={isBtnDisabled}>
Delete Layer
</Button>
);
}
英文:
I am using a <button> in a React component that has onClick and disabled attributes. The onButtonClick action and isButtonDisabled variable are retrieved from the store (I use Zustand). The isButtonDisabled selector includes some logic to determine whether the button should be disabled or not. My expectation is that the React component will disable the button using this variable, and only call onClick when the button is not disabled. However, it's possible that the component may not disable the button and call onButtonClick even when the button should be disabled.
This raises the question of whether I should run the same logic in the onButtonClick action and check if the button should be disabled. If the button is disabled, should I simply return early and do nothing?
This would be useful in cases where we forget to set the disabled attribute on a button and execute that action. Do I need to run the same logic that calculates whether the button should be disabled again in the action, or is it enough to trust the component to set disabled and use isButtonDisabled on a button?
<!-- language: lang-js -->
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
得分: 1
你可以信任 React 来为你禁用按钮。
但不要忘记，移除 HTML 中的 disable 属性非常容易，现在的年轻人都知道如何打开 HTML 元素并删除 disable 属性。因此，如果你的 onClick 函数非常关键，保护它可能是一个不错的选择，显然这取决于你计划部署在哪个环境中。
英文:
You can trust react to disable the button for you.
But don't forget that taking away the HTML disable property is super easy, any teen these days know how to open the HTML elements and erase the disable property. So protecting your onClick function might be a good option if it's something crucial, obviously it depends in which environment you are planning to deploy.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论