在 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} 传递给输入字段，因此您创建了一个 controlled component。但是，在更新输入时，您不会更新父级的状态，因此最终输入的值不会改变。

在你的输入上尝试这样的事情：

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

（我假设 onChange returns 新值是数字。如果不是，则需要相应地转换返回的数据，然后再在提交事件处理程序中检查它.)

同时将 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 来控制表单。这样就不需要每次输入字段发生变化时都重新渲染元素。如果您有兴趣了解您的情况，请告诉我。

在 React 中将商品添加到购物车时无法输入输入字段

Unable to type in an input field when adding item to cart in React

javascript

reactjs

react-redux