当输入数组在循环中呈现时，react中的input标记不允许输入多个字符

Question

我不能在输入类型="中输入多个字符；文本"；元素发生反应。

在第一个字符之后，react应用程序正在重新绘制，阻止我输入另一个字符。请让我知道我在这里缺了什么。

CODESANDBOX

Answer 1

问题在于您的key值，您将其设置为uuid()。每次组件重新渲染时，都会生成一个新的UUID，从而创建一个全新的输入。您可以看到它在这里使用索引作为关键字。

import React, { useState, useEffect } from "react";
import { InnerWrapper, Heading } from "./styling";
import uuid from "react-uuid";
export const ProductView = (props) => {
const [productData, setProductData] = useState(props.productData);
const updateProductData = (newQuantity = undefined, index = "") => {
const _ = productData.map((data, idx) => {
if (idx === index) {
return {
...data,
quantity: newQuantity ? newQuantity : data.quantity
};
} else {
return { ...data };
}
});
setProductData(_);
};
const onChangeQuantityHandler = (e) => {
e.preventDefault();
const newQuantity = parseInt(e.target.value.trim());
const index = parseInt(e.target.dataset.index);
updateProductData(newQuantity, index);
};
return (
<InnerWrapper flexDirection="column">
<table>
<thead>
<tr>
<th> Quantity </th>
</tr>
</thead>
<tbody>
{productData.map((data, idx) => {
return (
<tr key={idx}>
<td>
<input
value={data.quantity}
name="quantity"
data-index={idx}
onChange={onChangeQuantityHandler}
/>
</td>
</tr>
);
})}
</tbody>
</table>
</InnerWrapper>
);
};

如果您真的想使用UUID作为密钥，我建议您提前生成一个UUID。