React 受控与不受控输入表单

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

React 受控与不受控输入表单

React controlled vs. uncontrolled input form

input

reactjs

controlled-component