Question

我正在构建购物车演示，我已经快要完成自己的目标了，但是我遇到了一个令人沮丧的错误，似乎无法解决

中间的框应该是一个输入字段，这样，如果用户需要大量产品，他们可以轻松地键入而不是递增。

当我输入数字时，它可以正确反映并产生所需的更改。

但是，如果我输入数字，然后又使用（+ /-）按钮，则占位符值似乎并没有改变。

这是我的代码

 <div className="prod-count">
       <button className="plus" onClick={()=> onIncrement(product.id)}>+</button>
       <input type="text" onChange={(e)=> handleValue(product.id, valueExtracter(e))} className="num-box" placeholder={product.quantity}/>
       <button className="minus" onClick={()=> onDecrement(product.id, product.quantity)}>-</button>
 </div>

这是onChange函数

    const valueExtracter = (e) => {
        return parseInt(e.target.value)
    }

    //handle value will only run if input is a number 
    const handleValue = (id, value) => {
        if (!isNaN(value) && value > 0){
            dispatch(setQuantity(id, value))
        }
    }

我很确定操作可以正确调度，并且可以在总值中看到它，因此（product.quantity）值会发生变化，但占位符不会得到更新

最后一件事：将占位符切换为value后，便会应用所需的效果，但是，一旦使用值（1）创建组件，最终用户将无法擦除此（1），需要选择和覆盖

Answer 1

我只是用占位符换取价值。编辑：“我将用减号1来交易减按钮位置”，它看起来更加用户友好

<div class="user-sign-in">Hi, <span class="user-header-username"></span>
</div>

Answer 2

好像您缺少了价值道具

<input
  type="text"
  onChange={(e)=> handleValue(product.id, valueExtracter(e))} 
  className="num-box"
  value={product.quantity}
  placeholder={product.quantity}
/>

此外，您可能不需要在那里带有价值支柱的占位符。

Answer 3

必须使值提取器接受任何东西并将其转换为空字符串并将其传递给句柄值

const valueExtracter = (e) => {
    let value = parseInt(e.target.value)
    if (isNaN(value)) return ''
    else return value
}

//handle value will only run if input is a number 
const handleValue = (id, value) => {
    if (value === '' || value > 0){
        dispatch(setQuantity(id, value))
    }
}

将占位符切换为值，因为它现在可以接受空字符串

<input type="text" onChange={(e)=> handleValue(product.id, valueExtracter(e))} className="num-box" value={product.quantity}/>

如果reducer捕获到一个空字符串，则会将其乘以价格，这会将显示的价格变为0，所以我也对此进行了修复

<div className="prod-price">
     {itemPrice >= product.price ? `$ ${itemPrice.toFixed(2)}` : <span className="disabled-price">$ {product.price}</span>}
</div>

如果数量为”，则显示的价格将显示为红色，因为” *“一个数字将返回0

最后总数量和价格将通过减速器进行更新，如果产品数量为”，它将把总数量转换为字符串，这样我就可以对提交进行错误检查并提醒用户编写数量或删除项目

因此，如果用户决定在清除字段“” + 1 =“ 1”之后决定使用增量值，那么我在reducer中编写了此代码，以获取所有信息，因此通过检查educer函数进行了修复< / p>

 case "UPDATE_CART": 
        const indexToUpdate = cartCopy.findIndex(product => product.id === action.id)
        // if condition checks for when the item is set to '' to reset its value to 1
        if (cartCopy[indexToUpdate].quantity === ''){
            let itemReadded = {
                ...cartCopy[indexToUpdate],
                quantity: 1
            }
            newCart = [
                ...cartCopy.slice(0,indexToUpdate),
                itemReadded,
                ...cartCopy.slice(indexToUpdate + 1)
            ]
            return {
                ...state,
                cart: newCart ,
                totalAmount: totals(newCart).amount,
                totalQty: totals(newCart).qty,
            }

        }

在全局状态更改时更改输入占位符

3 个答案: