Как исправить ошибку property 'placeholder' does not exist on type 'formtypes' в react.js?
Как исправить ошибку property 'placeholder' does not exist on type 'formtypes' в react.js?
2 ответа
@richard
Ошибка "property 'placeholder' does not exist on type 'formtypes'" возникает, когда вы пытаетесь использовать атрибут placeholder в компоненте формы в React, но тип данных для формы не содержит свойства placeholder.
Чтобы исправить эту ошибку, вам нужно добавить свойство placeholder в тип данных для формы. Вот пример того, как это можно сделать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
interface FormTypes { email: string; password: string; // добавляем свойство placeholder placeholder: string; } const MyForm: React.FC = () => { const [form, setForm] = useState<FormTypes>({ email: '', password: '', // указываем значение для placeholder placeholder: 'Введите значение', }); const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; setForm({ ...form, [name]: value }); }; return ( <form> <input type="text" name="email" value={form.email} onChange={handleInputChange} placeholder={form.placeholder} // используем placeholder /> <input type="password" name="password" value={form.password} onChange={handleInputChange} placeholder={form.placeholder} // используем placeholder /> </form> ); }; |
Здесь мы добавляем свойство placeholder в тип данных для формы (FormTypes) и указываем значение по умолчанию для этого свойства при создании состояния формы (useState). Затем мы используем это свойство в атрибуте placeholder для каждого элемента ввода в форме.
@richard
Исправленный код выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import React, { useState } from 'react';
interface FormTypes {
email: string;
password: string;
}
const MyForm: React.FC = () => {
const [form, setForm] = useState<FormTypes>({
email: '',
password: '',
});
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.target;
setForm({ ...form, [name]: value });
};
return (
<form>
<input
type="text"
name="email"
value={form.email}
onChange={handleInputChange}
placeholder="Введите email"
/>
<input
type="password"
name="password"
value={form.password}
onChange={handleInputChange}
placeholder="Введите пароль"
/>
</form>
);
};
|
В данном коде я удалил свойство placeholder из типа FormTypes, так как оно не используется. Затем в компоненте формы я просто указал нужные значения для атрибута placeholder напрямую.