Action функция и атрибут action

1. Добавляем к форме обертку <form>
2. Удаляем onClick={handleSubmit} с кнопки
3. Добавляем к форме action={handleSubmit}
4. В функции handleSubmit теперь можно объявить первый параметр, в него будет передаваться объект formData из отправленной формы.

Добавим к инпуту name=”name” чтобы достать его из formData и сделаем вывод этого значения в консоль внутри action функции handleSubmit:

const handleSubmit = (formData) => {

	console.log(formData.get("name"));
	
	// ...
}

return (
	<form action={handleSubmit} className="card shadow p-3">
		{//...}
		<input
			name="name"
			className="form-control mb-3"
			value={name}
			onChange={(event) => setName(event.target.value)}
		/>

Теперь отвяжем input от состояния, так как его значение мы можем получить через formData. И также мы увидим сброс значения в input после отправки формы, так как форму обрабатывает action функция.

Изменения в коде:

function App() {
	// const [name, setName] = useState(""); Удаляем
	const [error, setError] = useState(null);
	const [isPending, setTransition] = useTransition();
	const [success, setSuccess] = useState(false);
	
	const handleSubmit = (formData) => {
		console.log(formData.get("name"));
		// ...
	}
	
	return (
		<form action={handleSubmit} className="card shadow p-3">
		
			<input
				name="name"
				className="form-control mb-3"
			/>

Промежуточные итоги по action функции:

1. Обрабатывает отправку формы, передается в prop action={}
2. При вызове принимает аргумент fromData с данными отправленной формы
3. При завершении работы сбрасывает данные формы