Как типизировать обработку мультиформы?

Question

[Boris007]

Как правильней работать с типизированной реакт формой?
Она так должна выглядеть или можно сделать лучше/правильней?

Есть форма
<form onSubmit={handleSubmit}>

        <label>Enter your name</label>
        <input type="text" name="name" value={data.name || ''} onChange={handleChangeInput} />

        <textarea name="text" value={data.text || ''} onChange={handleChangeTextArea} />

        <input type="checkbox" name="check" checked={data.check} onChange={handleCheck} />
        <label htmlFor="vehicle1">CheckBox</label>

        <select name="cars" onChange={handleChangeSelect}>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>

        <input type="submit" />
</form>

Описал интерфейс

interface FormData {
  name: string;
  text: string;
  cars: string;
  check: boolean;
}

Создал хук данных

const [data, setData] = useState<FormData>({
    name: '',
    text: '',
    cars: '',
    check: false
})

Если с обработкой кнопки все просто, т.к. она одна, то...

async function handleSubmit(event: FormEvent) {
    event.preventDefault()
    await fetch...
}

Как быть с обработкой разных типов полей?
У меня выходит типизировать обработку только каждого типа по отдельности, хотя у всех, кроме checkboxодинаковые свойства nameи value

function handleCheck(event: ChangeEvent<HTMLInputElement>) {
    const key = event.target.name
    const value = event.target.checked
    setData(data => ({...data, [key]: value}))
  }
  
  function handleChangeInput(event: ChangeEvent<HTMLInputElement>) {
    const key = event.target.name
    const value = event.target.value
    setData(data => ({...data, [key]: value}))
  }

  function handleChangeTextArea(event: ChangeEvent<HTMLTextAreaElement>) {
    const key = event.target.name
    const value = event.target.value
    setData(data => ({...data, [key]: value}))
  }

  function handleChangeSelect(event: ChangeEvent<HTMLSelectElement>) {
    const key = event.target.name
    const value = event.target.value
    setData(data => ({...data, [key]: value}))
  }

Comments

[Александр]

Используйте готовые библиотеки для работы с формами, сэкономите много времени: react-hook-form, Formik, Formily и т.д.

[Boris007]

Александр, спасибо!
Мне так же для базового понимания сначала хочется с нативным примером разобраться.

Answer 1

[Александр]

https://codesandbox.io/p/sandbox/qna-q-1313246-zkkdfd

Comments

[Boris007]

Спасибо огромное!
Помню похожее пытался сделать при типизации

<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>

но у меня почему-то ошибку выдавало, сейчас заработало

[Boris007]

Подскажи пожалуйста зачем через тип это сделано?

interface BasicFormValues {
  name: string;
  description: string;
  car: string;
  active: boolean;
}

Что на этой строчке происходит?
Мне казалось keyof возвращает значение ключей, а не их типов
Как в данном случае получилось, что нам здесь вернулись не ключи, а их значения в виде типов?

type BasicFormTypeValues = BasicFormValues[keyof BasicFormValues];

let value: BasicFormTypeValues = event.target.value;

[Александр]

Boris007, 1. Работать с этим проще.
2. Достает тип значения по каждому ключу и объединяет в union.

keyof BasicFormValues = 'name' | 'description' | 'car' | 'active'

3. BasicFormTypeValues необходимо в пример для того, чтобы переменную с event.target.value можно было переприсвоить в другой тип, в примере в boolean.