1

我正在创建一个反应应用程序，其中我有两个组件，即 Parent 和 Child，但有一点需要注意，我在整个应用程序中使用无状态组件（功能组件）和挂钩。

//父.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
...
    }

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

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

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

4

0 回答 0