时间戳

首页 > 解决方案 > 为什么我的文本输入不允许我更改其中的值？

reactjs - 为什么我的文本输入不允许我更改其中的值？

问题描述

我在反应中定义了以下输入字段：

const [products, setProducts] = useState(cart.products);

<div>
   {products.map((item) => (
    <input
       className="form-control-sm text-center mb-2"
       type="number"
       value={item.quantity}
       onChange={() => handleChange(event.target)}
       name="quantity"
    />
   ))}
</div>

即使未将 item.quantity 指定为只读字段，我也无法在浏览器中更改它的值。

数据：

cart 
 {_id: "5f15ee2c0b94bf240470d70d", user: "5f15ee2c0b94bf240470d70c", 
products: Array(3), __v: 0}
products: Array(3)
0:
product:
brand: "Apple"
category: []
color: "Silver"
images: ["latest-prduct-1.jpg"]
list_price: 220
name: "lorem ippsum dolor"
price: 120
rating: "5"
size: "Medium"
_id: "5f1864667c213e0f5779ee40"
__proto__: Object
quantity: 8
_id: "5f1f04267e422c266c5c1d42"

标签： reactjs

解决方案

item.quantity 是指对象中的固定值。意味着您为输入提供固定值而不是可变状态。这是创建受控输入字段的反应方式 https://reactjs.org/docs/forms.html

在钩子中，就像

const YourComp = ({initialQuantity}) => {
  const [quantity, setQuantity] = useState(initialQuantity)
  return (
    <div>
        <input
           className="form-control-sm text-center mb-2"
           type="number"
           value={quantity}
           onChange={ e => setQuantity(e.target.value)}
           name="quantity"
        />
    </div>
  )

}

你把它映射为

{cart.products.map((item) => (
    <YourComp initialQuantity={item.amount} />
))}

推荐阅读