Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Глубокое погружение в формы в современном React
В своем блоге Кент С. Доддс рассказал, как использовать новые хуки useFormStatus, useActionState и useOptimistic:
🌟 useFormStatus. Если вы знакомы с контекстом в React, то представьте, что тег form - это провайдер данных, а useFormStatus - это хук, который имеет доступ к данным провайдера. С помощью хука можно получить информацию о состоянии формы и переданных данных. Минус хука в том, что, чтобы его использовать, нужно создавать отдельный компонент, который должен быть вложен внутри form.
function JoinButton({ children }: { children: React.ReactNode }) {
const { pending, data } = useFormStatus()
return (
<button type="submit">
{pending ? `Joining as ${data.get('username')}...` : children}
</button>
)
}
function JoinEventForm() {
/** --snip */
return (
<form action={joinEvent}>
<JoinButton>Join</JoinButton>
</form>
)
}
🌟 useActionState. Этот хук позволяет обновить стейт по данным из формы. Разберем пример:
async function joinEvent(
previousState: { joined: boolean },
formData: FormData,
) {
/** --snip */
return { joined: true }
}
function JoinEventForm() {
const [state, formAction, isPending] = useActionState(
joinEvent,
{ joined: false },
JOIN_URL,
)
return (
<div>
{state.joined ? (
<p>See you there!</p>
) : (
<form action={formAction}>
<button type="submit">
{isPending ? 'Joining...' : 'Join'}
</button>
</form>
)}
</div>
)
}
Хук принимает функцию joinEvent, начальный стейт { joined: false } и опциональный параметр пермалинк JOIN_URL. Он возвращает массив с текущим стейтом, функцию триггера действия и флаг – находится ли форма в состоянии отправки. Обратите внимание, что функция joinEvent принимает первым аргументом предыдущее состояние. В каком-то смысле можно представить, что это редьюсер для useReducer.
https://www.epicreact.dev/react-forms
59 · 3.3K ·