Контролируемая и неконтролируемая форма ввода React

Прежде всего, учтите, что я новичок, чтобы отреагировать.

Я создаю форму с полем ввода. При вводе текста во вход я получаю сообщение о том, что

Предупреждение: компонент изменяет неконтролируемый вход для управления

Я заглядываю в документацию, но не могу понять, почему она так себя ведет. Кто-нибудь может помочь мне понять?

вот поле ввода

<div>
      <input type="text"
       name = 'brand'
       onChange = {(e) => inputChange(e)}
       value = {submit.brand}
       required />
    </div>

вот функция для ее обработки

{submit, SetSubmit} = useState([)
const inputChange = (e) => {
const { name, value } = e.target;
setSubmit(submit => ({...submit, [name]: value}))}

заранее большое спасибо за помощь в понимании


reactjs input controlled-component
person b81    schedule 17.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете обратиться сюда для использования контролируемых входов в функциональном компоненте.

Вы неправильно инициализируете состояние,

const [submit, SetSubmit] = useState('');

Кроме того, событие onChange следует обрабатывать как

   <div>
      <input type="text"
       name = 'brand'
       onChange = {inputChange}
       value = {submit}
       required />
    </div>

И функционировать как,

const inputChange = (e) => {
  setSubmit(e.target.value)
}

В случае нескольких входов см. Следующий пример:

import React, { useState } from "react";

const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company"
            label="Company"
          />
          <input
            value={values.position}
            onChange={handleInputChange}
            name="position"
            label="Job Title"
          />
           // ... Rest of the input fields
          <button type="submit"> Submit </button>
        </form>
  );
}
person NeERAJ TK    schedule 17.03.2021
comment
спасибо за повтор. У меня есть несколько отзывов. Это был всего лишь один пример. Более того, если я изменю функцию inputCahnge, я потеряю имя, которое представляет ключ. - person b81; 17.03.2021
comment
@ b81 Я обновил ответ - person NeERAJ TK; 17.03.2021
comment
огромное спасибо. Я просматриваю документ, которым вы поделились, чтобы лучше понять, почему это произошло - person b81; 17.03.2021