Заметки про React
GIF
ezgif-6-028077ff50.mp4 · 16 КБ
ezgif-6-028077ff50.mp4 · 16 КБ
Создание переиспользуемой SubmitButton
В React 19 появился хук useFormStatus для получения статуса формы. С его помощью можно создать переиспользуемую кнопку действия, которая будет сама переходить в состояние прогресса и дизейблиться. Пример компонента кнопки:
export default function SubmitButton({
children,
loading,
disabled,
...otherProps
}: Props & React.HTMLProps<HTMLButtonElement>) {
const { pending } = useFormStatus();
const isSubmitting = pending || loading;
return (
<Button
{...otherProps}
disabled={isSubmitting || disabled}
type="submit"
>
{isSubmitting ? (
// progress
) : (
children
)}
</Button>
);
}
В своей статье автор привел пример использования этой кнопки в React 19 с серверными функциями. Такой пример будет работать, даже когда JavaScript выключен или когда кнопка еще не гидратировала:
export default function Component({ contactId }: { contactId: string }) {
return (
<form action={deleteRecord}>
<input type="hidden" name="contactId" value={contactId} />
<SubmitButton>Delete</SubmitButton>
</form>
);
}
https://aurorascharff.no/posts/creating-a-reusable-submitbutton-with-useformstatus
30 · 3K ·