Только начал разбираться в том как работать в связке react + typescript и уже назрел один вопрос) Существует компонент Login в котором есть форма авторизации. На событие onSubmit я хочу выбрать из этой формы поля email и password при помощи этого выражения event.target.elements. Но typescript ругается и выдает такую ошибку Property 'elements' does not exist on type 'EventTarget'. Подскажите пожалуйста как мне можно исправить эту ошибку, стоит просто написать вместо (event: React.FormEvent) это (event: any) или есть другой способ?
interface LoginProps {
history?: {}
}
const Login: React.FC<LoginProps> = ({ history }) => {
const [loading, setLoading] = useState<Boolean>(false);
const handleLogin = useCallback(async (event: React.FormEvent) => {
event.preventDefault();
const { email, password } = event.target.elements;
}, [history]);
return (
<>
<div className="auth">
<form className="auth_form" onSubmit={handleLogin}>
<div className="auth_in">
<h5 className="title offset_mod">Log In</h5>
<div className="auth_body">
<div className="auth_w_input">
<input
type="text"
className="input"
name="email"
placeholder="Email"
aria-label="email"
aria-describedby="addon-wrapping"
/>
</div>
<div className="auth_w_input">
<input
type="password"
name="password"
className="input"
placeholder="Password"
aria-label="password"
aria-describedby="addon-wrapping"
/>
</div>
</div>
<div className="auth_footer">
<button type="submit" className="btn primary_state btn_auth">Log In</button>
</div>
</div>
</form>
</div>
</>
(e.target as HTMLFormElement).elements
, но я не уверен, насколько это best practices. То есть кастинг к форме. Но это точно сработает :) Можно это всё в ифчик обернуть, в которо проверять наличие формы в доме, чтобы уже точно не облажатсья.let elementsArray = Array.from((e.target as HTMLFormElement).elements)
. но опять же, это не объект. Это массив. То есть чтобы получть какой-то элемент, придётся работать как с массивом. Напримерconst mailInput = elementsArray[0]
, ну это условно, я не знаю какая там у тебя форма. Хотелось бы, конечно, по красоте, но не выйдет :)const emailInput = React.useRef<HTMLInputElement | null>(null); const passwordInput = React.useRef<HTMLInputElement | null>(null);