在React中将项目添加到购物车时，无法键入输入字段

Question

我在这里尝试应用的逻辑可能完全错误。这是我第一次尝试这样做(尝试使用输入字段来获取要添加到购物车中的项目数的值(。我无法在输入字段中键入。

const [qty, setQty] = useState(1)
const submitHandler = (e) => {
e.preventDefault()
if(e.target.value <=product.countInStock && e.target.value > 0){
setQty(e.target.value)
history.push(`/cart/${match.params.id}?qty=${qty}`)
}else{
alert("Insifficient Quantity in Stock")
}
}
========================================
<Row>
<Col sm={4}>Qty</Col>
<Col sm={8}>
<Form onSubmit={submitHandler}>
<Form.Control
type="number"
min="0"
max={product.countInStock} 
value={qty}
onchange={checkInput}                                                         
/>
<Button
onClick={addToCartHandler}
size="lg"
disabled={product.countInStock === 0}
type='button'>
Add to Cart
</Button>
</Form>
</Col>
</Row>

我该如何修复它？这似乎是一个流行的问题，人们在网上提出了问题，但仍然找不到解决方案来挖掘

Answer 1

您的事件处理程序似乎有问题。由于将value={qty}传递到输入字段，因此可以创建受控组件。然而，在更新输入时，不会更新父级的状态，因此最终输入的值不会更改。

在你的输入上试试这样的东西：

<Form.Control
type="number"
min={0}
max={product.countInStock}
value={qty}
onchange={(e) => setQty(e)}/> 

(我假设onChange以数字形式返回新值。如果没有，则在提交事件处理程序中检查返回的数据之前，您需要对其进行相应的转换。(

同时将submitHandler更新为：

const submitHandler = (e) => {
e.preventDefault()
if (qty <= product.countInStock && qty > 0) {
history.push(`/cart/${match.params.id}?qty=${qty}`)
} else {
alert('Insufficient Quantity in Stock')
}
}

Answer 2

Daniel的答案是正确的，因为除非您更改控制它的状态变量，否则受控输入字段不会更改其值。因此，您真正需要的是将setQty(e.target.value)放入checkInput函数中。这就行了。

你也可以使用useRef来控制你的表单。这样就不需要每次输入字段发生变化时都重新提交你的元素。如果你有兴趣看看你的情况会如何，请告诉我。