Как исправить ошибку property 'placeholder' does not exist on type 'formtypes' в react.js?

Пользователь

от richard , в категории: JavaScript , год назад

Как исправить ошибку property 'placeholder' does not exist on type 'formtypes' в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от brook , год назад

@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 для каждого элемента ввода в форме.

Пользователь

от jerrold_langworth , 2 месяца назад

@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 напрямую.