Для описания типов обработки мультиформы в React можно использовать TypeScript или PropTypes. В обоих случаях это позволяет указать ожидаемые типы данных для каждого поля формы, чтобы обеспечить правильное взаимодействие с формой и предотвратить ошибки ввода.
Вот пример использования TypeScript для типизации формы в React:
```tsx
interface FormData {
name: string;
age: number;
email: string;
}
const MyForm: React.FC = () => {
const [formData, setFormData] = useState<FormData>({
name: "",
age: 0,
email: ""
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
};
```
В этом примере мы определяем интерфейс `FormData`, который описывает типы данных для каждого поля формы. Мы также используем хук `useState` для хранения состояния формы и функцию `handleChange` для обновления состояния при изменении полей. Функция `handleSubmit` вызывается при отправке формы и выводит данные формы в консоль.
Если вы используете PropTypes, вы можете описать типы данных аналогичным образом внутри вашего компонента. Пример выше с использованием PropTypes:
```jsx
import PropTypes from "prop-types";
const MyForm = () => {
const [formData, setFormData] = useState({
name: "",
age: 0,
email: ""
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
};
MyForm.propTypes = {
formData: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
email: PropTypes.string
}).isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired
};
```
В этом примере мы используем `PropTypes.shape`, чтобы указать типы данных для каждого поля формы, и `PropTypes.func`, чтобы определить типы для функций `handleChange` и `handleSubmit`. Компонент также принимает `MyForm.propTypes`, которые определяют ожидаемые пропсы и их типы.