Как печатать менее многословно
Мне было интересно, можно ли ввести handleSubmit менее подробным способом. Возможно, создав новый интерфейс, поместив eventDefault. Как бы я это сделал?
import {Project} from "../ProjectsPage/Project";
interface FormTypeProps {
onCancel: () => void;
onSave: (project: Project) => void;
}
export function ProjectForm({onCancel, onSave}: FormTypeProps) {
const handleSubmit = (event: { preventDefault: () => void; }) => {
event.preventDefault()
onSave(new Project({name: 'Update Project'}))
}
return (
<form className = "input-group vertical" onSubmit = {handleSubmit}>
<label htmlFor = "name">Project Name</label>
<input type = "text" name = "name" placeholder = "enter name"/>
<label htmlFor = "description">Project Description</label>
<textarea name = "description" placeholder = "enter description"/>
<label htmlFor = "budget">Project Budget</label>
<input type = "number" name = "budget" placeholder = "enter budget"/>
<label htmlFor = "isActive">Active?</label>
<input type = "checkbox" name = "isActive"/>
<div className = "input-group">
<button className = "primary bordered medium">Save</button>
<span/>
<button type = "button" className = "bordered medium" onClick = {onCancel}>
Cancel
</button>
</div>
</form>
)
}
Ответы 2
Вы можете присвоить тип либо самой функции, либо аргументам функции, которая является событием.
React.FormEventHandler<HTMLFormElement>
Это тип функции. Если вы используете это так:
handleSubmit: React.FormEventHandler<HTMLFormElement> = e => {
}
Тогда тип переменной e будет автоматически определен как React.FormEvent. Таким образом, вам на самом деле не нужно знать тип события, потому что вы можете применить тип к самой функции и получить правильный тип.
Или вы можете присвоить тип аргументу события e.
handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
}
Теперь тип свойства handleSubmit выводится как (e: React.FormEvent<HTMLFormElement>) => void.
Нет, параметр event не является FormEventHandler<T>. А откуда взялся T?
Спасибо за ваш комментарий. Обновлено
Вы можете использовать React.FormEvent как тип параметра event:
import React, { FormEvent } from "react";
// ...
const handleSubmit = (event: FormEvent) => {
event.preventDefault();
// ...
};
React имеет свои собственные синтетические типы событий для различных событий, которые вы используете при настройке обработчика таким образом, как вы, со свойством onXyz на элементе. (При настройке обработчика через addEventListener, что все еще иногда необходимо, важно нет использовать синтетические типы событий React, поскольку вы настраиваете не обработчик событий React, вы настраиваете обработчик событий DOM. Но с как вы это делаете, вам нужен синтетический тип.)
Вы мог вводите саму функцию как FormEventHandler<HTMLFormElement>:
import React, { FormEvent } from "react";
// ...
const handleSubmit: FormEventHandler = (event) => {
event.preventDefault();
// ...
};
Обратите внимание, что и FormEvent, и FormEventHandler являются универсальными типами, принимающими аргумент типа для типа элемента, которым будет target. По умолчанию используется Element, чего часто бывает достаточно, но вы также можете поставить HTMLFormElement (например, FormEvent<HTMLFormElement>), если хотите быть более тщательным.
Спасибо за ответ! Пользуясь темой, не подскажете, не лагает ли этот метод типа? Я обновлю пост.
@Stlick - боюсь, я не знаю, что вы подразумеваете под «отставанием».
Как будет выглядеть синтаксис?