在react应用程序中键入一个字符后，输入字段失去焦点

Question

在我的例子中，我有一个下拉列表，根据下拉列表中选择的数字，会显示一些输入字段。当我在输入字段中键入一个字符后，对该输入字段的关注就会丢失。为每个字段设置一个唯一的键并不能解决我的问题。

项目链接：https://codesandbox.io/s/stoic-brahmagupta-m5014

const ItemPrice = () => {
const data = itemData.doReservation.eventPackage.item;
let emptyCat = {};
let emptyQnt = {};
let promoNum = {};
let emptyPromotion = {};
const [promoNumber, setPromoNumber] = useState(promoNum);
for (let it in data) {
let cat = {};
let promo = {};
for (let bt in data[it].buyertypes) {
cat[data[it].buyertypes[bt].id] = "";
emptyQnt[data[it].buyertypes[bt].id] = 0;
promo[data[it].buyertypes[bt].id] = "";
promoNum[data[it].buyertypes[bt].id] = [];
emptyPromotion[data[it].buyertypes[bt].id] = {};
}
emptyCat[data[it].id] = cat;
cat = {};
}
const [quantity, setQuantity] = useState(emptyQnt);
const [code, setCode] = useState(emptyPromotion);
const handleQuantity = (e) => {
const name = e.target.name;
const value = e.target.value;
setQuantity({
...quantity,
[name]: value
});
let num = [];
for (let i = 1; i <= value; i++) {
num.push(i);
}
setPromoNumber({ ...promoNumber, [name]: num });
let num2 = {};
for (let pn = 1; pn <= value; pn++) {
if (code[name]["code" + name + pn] === undefined) {
num2["code" + name + pn] = "";
} else {
num2["code" + name + pn] = code[name]["code" + name + pn];
}
}
setCode({ ...code, [name]: num2 });
};
const handleCode = (e) => {
e.preventDefault();
const sp = e.target.name.split(",");
const id1 = sp[0];
const id2 = sp[1];
const value = e.target.value;
setCode({
...code,
[id1]: {
...code[id1],
[id2]: value
}
});
};
const ShowData = () => {
let buyerTypes = [];
let items = [];
if (data) {
for (let it in data) {
items.push(
<div className="selectionHeader">
<div className="selHeadType">type</div>
<div className="selHeadQnt">Quantity</div>
<div className="selHeadCat">Price category</div>
</div>
);
for (let bt in data[it].buyertypes) {
buyerTypes.push({
dsc: data[it].buyertypes[bt].description,
qntId: data[it].buyertypes[bt].id
});
}
items.push(
<div>
{buyerTypes.map((i, index) => (
<div key={`a${index}`} className="selectionRowComp">
<div key={`c${index}`} className="selectionRow">
<h4 className="btDescription">{i.dsc}</h4>
<div className="NumberDropDown">
<select
value={quantity[i.qntId]}
onChange={handleQuantity}
name={i.qntId}
>
{[0, 1, 2, 3, 4, 5, 6].map((l) => {
return (
<option value={l} key={l}>
{l}
</option>
);
})}
</select>
</div>
</div>
<div>
{promoNumber[i.qntId].map((p, index) => (
<div key={`s${index}`}>
<label className="codeLabel">code {p}: </label>
<input
className="codeInput"
type="text"
value={code[i.qntId]["code" + i.qntId + (index + 1)]}
onChange={handleCode}
name={[i.qntId, "code" + i.qntId + (index + 1)]}
// required={hasPromotion[i.qntId]}
/>
</div>
))}
</div>
</div>
))}
</div>
);
buyerTypes = [];
}
}
return (
<div className="selectionItem">
{items.map((it, index) => {
return <div key={`w${index}`}> {it}</div>;
})}
</div>
);
};
const handleSubmit = (e) => {
e.preventDefault();
};
return (
<div>
<div>
<div>
<form onSubmit={handleSubmit}>
<ShowData />
</form>
</div>
</div>
</div>
);
};

Answer 1

您必须分别解耦Parent(ItemPrice(和Child(ShowData(组件。

需要对代码进行彻底的重新考虑。因为像const data这样的依赖关系是在ItemPrise中定义的，并在子组件ShowData中使用，所以它应该作为Props发送到ShowData组件。

ShowData组件不应直接依赖于ItemPrise组件中定义的任何变量/常量。所有这样的依赖关系都应该使用以下任何一个基础来传递您的用例和应用程序需求：

1. Props
2. Context
3. 全局状态管理，如Redux
4. 自定义挂钩