反应受控与不受控制的输入表单

如何解决反应受控与不受控制的输入表单

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

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

警告：组件正在将不受控制的输入更改为受控

我查看了文档，但我无法理解它为什么会这样。有人能帮我理解吗？

这里是输入框

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

非常感谢您帮助我理解

解决方法

您可以参考 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>
  );
}