import React, { useState } from "react";
import "../styles.css";
const FormBox = () => {
const [value, setValue] = useState({
fName: "",
lName: "",
});
const [textArea, setTextArea] = useState("");
const handleSumbit = (e) => {
e.preventDefault();
console.log(value);
console.log(textArea);
};
return (
<div className="center">
<form onSubmit={handleSumbit}>
<div>
{/*This is how to set a control form box */}
<input
placeholder="First Name"
type="text"
value={value.fName}
onChange={(e) => setValue(e.target.value)}
/>
</div>
<div>
{/*This is how to set a control form box */}
<input
placeholder="Last Name"
type="text"
value={value.lName}
onChange={(e) => setValue(e.target.value)}
/>
</div>
<div>
<textarea
value={textArea}
onChange={(e) => setTextArea(e.target.value)}
></textarea>
<div>
<input type="submit" />
</div>
</div>
</form>
</div>
);
};
export default FormBox;
我正在做一个基本的React项目，目前我收到的消息是"；警告：组件正在将受控输入更改为非受控输入。这可能是由值从已定义更改为未定义引起的，这不应该发生。决定在组件的使用寿命内使用受控或非受控输入元件。更多信息：https://reactjs.org/link/controlled-components输入"；
另一个问题是，在"名字"字段框中输入时，我没有得到任何信息。我确实找回了姓氏和短信区。
非常感谢，节日快乐
您有两个问题：
- 未从名字字段获取信息
- 非受控与受控警告
第1期。
这实际上是因为在名字和姓氏输入上都要执行setValue(e.target.value)。CCD_ 2将最初初始化的对象设置为CCD_。这意味着，即使值一开始是一个对象，但在任何字段上写入时，它都会变成一个简单的字符串，无论是名字还是姓氏。
文本区域不会出现此问题，因为您可以在单独的状态textArea上跟踪其值。这是解决问题的一种方法，在单独的useState调用中保持fName和lName。另一种方法是用一个按预期工作的新对象替换旧的value对象，例如：
<input
placeholder="First Name"
type="text"
value={value.fName}
onChange={(e) => setValue({ ...value, fName: e.target.value })}
/>
我还建议尽可能避免使用缩写。您本可以使用firstName和lastName作为变量名。它确实大大提高了可读性。
问题2。
此警告是第一个问题的副作用。它之所以出现，是因为您使用的是受控输入，但在其中一个上写入时，对象会变成字符串，并且value.fName和value.lName都是undefined。受控输入不应该有undefined作为值，因为这通常是您想要使用非受控输入的指标。空值应该是一个空字符串，这是预期的，如果修复第一个问题，就会修复。
还有另一个堆栈溢出共享受控组件和非受控组件之间的差异：什么是React受控组件和不受控组件？
受控组件是通过props获取其当前值并通过onChange等回调通知更改的组件。一个母部件"；控件"；它通过处理回调和管理自己的状态，并将新值作为道具传递给受控组件。你也可以称之为"；哑部件"；。
非受控组件是一个在内部存储其自身状态的组件，当需要时，您可以使用ref查询DOM以查找其当前值。这有点像传统的HTML。
这里需要注意的重要一点是，不受控制的组件不会接收到value道具，因此其值为undefined。