Question

我正在创建一个React应用程序，其中有两个组件，例如Parent和Child，但要注意的一点是我在整个应用程序中使用无状态组件（功能组件）和hooks 。

>

// Parent.jsx

 import React, { useState } from "react";

    function Parent() {
    const [firstName, setFirstName] = useState("");
    const handleChange = event => {setFirstName(event.value);}
...
Rest Code
...
}

// Child.jsx

    function Child(props) {
          <label htmlFor="validationCustom01">First Name</label>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="enter first name"
                      value={props.firstName || ""}
                      onChange={props.handleChange}
                      required
                    />
    ...
Rest Code
...
    }

页面呈现完美，但是一旦在文本框中写入，就会出现以下错误

组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控制切换为不受控制（反之亦然）。

我尝试了所有可能的解决方案，但这不起作用。但是，类似的功能可以在类组件中完美运行，而不能在功能组件中运行。有想法吗？

组件将文本类型的受控输入更改为React中的不受控制的错误

0 个答案: