反应受控与不受控制的输入形式

Question

首先考虑到我对反应还很陌生。

我正在构建一个表单，其中一个字段是一个输入。在输入中输入文本时，我收到一条消息，说

警告：组件正在更改要控制的非受控输入

我查看了文档，但我无法理解它为什么会这样。谁能帮我理解一下？

这里是输入框

<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}))}

非常感谢您帮助我理解

Answer 1

您可以参考here 了解功能组件中受控输入的用法。

您正在错误地初始化状态，

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>
  );
}