时间戳

首页 > 解决方案 > 反应受控与不受控制的输入形式

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

问题描述

首先考虑我是相当新的反应。

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

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

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

这是输入字段

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

非常感谢您帮助我理解

标签： reactjsinputcontrolled-component

解决方案

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

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

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

推荐阅读