Input Type在使用useState时输入时失去焦点

Question

当我开始键入一个字符时，输入失去了焦点。我看到了很多StackOverflow的答案，但没有一个是有效的。我还添加了唯一的键。代码不能工作的原因是什么?没有政府，它也运转得很好。但是在添加状态后，输入将失去焦点。

import React, { useState } from "react";
const Footer = ({ formData }) => {
const [colorsArray, setColors] = useState(["Red", "Green", "Blue", "Yellow"]);
const [sizeArray, setSizes] = useState(["S", "M", "L", "XL"]);
const [sizeInput, setsizeInput] = useState("");
const colorElementRemoveHandler = (indexToRemove) => {
const filteredValue = colorsArray.filter((data, index) => {
return indexToRemove !== index;
});
setColors(filteredValue);
};
const sizeElementRemoveHandler = (indexToRemove) => {
const filteredValue = sizeArray.filter((data, index) => {
return indexToRemove !== index;
});
setSizes(filteredValue);
};
const addColorHandler = (e) => {
let input = e.target.value.toLowerCase();
if (input.length > 2) {
let temp = colorsArray;
temp.push(input);
setColors(temp);
}
};
const addSizeHandler = (e) => {
let input = e.target.value.toUpperCase();
if (input.length > 0) {
let temp = sizeArray;
temp.push(input);
setSizes(temp);
console.log(sizeArray);
}
};
const Test = () => {
return (
<input
type="text"
onChange={(e) => {
setsizeInput(e.target.value);
}}
value={sizeInput}
/>
);
};
const VariantUI = () => {
return (
<div>
<label>Size</label>
<input
id="optionName"
type="text"
placeholder="e.g S, M, L, XL"
onChange={(e) => {
setsizeInput(e.target.value);
}}
value={sizeInput}
/>
</div>
<ul>
{sizeArray.map((data, index) => {
return (
<li key={index}>
{data}
<i onClick={() => {sizeElementRemoveHandler(index);}}></i>
</li>
);
})}
</ul
);
};
return (     
<VariantUI formData={formData} />

);
};
export default Footer;

提前感谢。

Answer 1

const Footer = ({ formData }) => {
// ..
const VariantUI = () => {
// ...
return (<VariantUI formData={formData} />)
}

您正在创建一个全新类型的组件(VariantUI)，在渲染Footer的中间。这将发生在任何渲染。每个VariantUi函数可能与前一个有相同的文本，但它是一个不同的函数，因此反应是不同类型的成分。由于它是不同类型的组件，旧的组件卸载，新的组件安装。新挂载的<input>没有焦点

组件类型只能定义一次，不能在每次呈现时都定义。所以VariantUI需要移到页脚之外。由于当前依赖于闭包变量，因此需要将其更改为props:

const VariantUI = ({
sizeArray, setSizes, sizeInput, setSizeInput,  // I might have missed a couple props
}) => {
// ...
}
const Footer = ({ formData }) => {
// ...
return (
<VariantUI
sizeArray={sizeArray}
setSizes={setSizes}
sizeInput={sizeInput}
setSizeInput={setSizeInput}
/>
);
}