在按钮更改时响应输入值而不是重新呈现。

Question

我正在建造一个购物车项目。

我试图为我的购物车页面构建的一个特性是一个输入值，显示购物车中每个产品的数量(以便用户可以手动调整产品数量)，以及输入两边的一个按钮，以将数量减少/增加1。

下面是指向我的代码框的链接，可以通过向购物车中添加任何一项来重新创建该问题：

https://codesandbox.io/s/yqwic

我为手动调整输入字段而构建的逻辑可以正常工作，但是当我单击增量/递减按钮时，它只是在调整导航栏中的购物车显示中的项目数。输入字段没有更新--但是当查看React Developer-Tools组件调试器时，底层的数量正在更新到正确的图形--它只是没有重新显示DOM中的输入值。

有人能指出我哪里出错了吗？我尝试在输入字段中将defaultValue切换到value，但是这阻止了我手动调整输入。

谢谢

Answer 1

问题

1. 您在AppLogic实用程序中严重地改变了购物车项的状态。
2. 您正在为手动输入提供一个“不受控制的”输入。这意味着它最初是用一个值呈现的，但是当您在外部更改“状态”时，它表示的值不会更新，因为它是不受控制的。

解决方案

AppLogic.js

修复您的还原器实用程序，使他们不变异购物车项目。在更新它们时，您应该浅层复制整个购物车项数组，然后浅层复制特定的购物车项。

export const checkIfItemInCart = (item, array, sum) => {
  const index = array.findIndex((object) => object.id === item.id);
  if (index !== -1) {
    const newArray = array.map((item, i) => i === index ? {
      ...item,
      quantity: item.quantity + (sum === "add" ? 1 : -1)
    } : item)
    if (!newArray[index].quantity) {
      return deleteItemLookup(item, newArray);
    }
    return newArray;
  }
  return array.concat(item);
};

export const customQuantityUpdate = (item, array, newQuantity) => {
  const index = array.findIndex((object) => object.id === item.id);

  const oldQuantity = array[index]?.quantity;

  // This could be more DRY, but edited to work
  if (newQuantity > oldQuantity) {
    return { array: array.map((item, i) => i === index ? {
      ...item,
      quantity: newQuantity
    } : item), type: "add", newQuantity, oldQuantity };
  } else if (newQuantity < oldQuantity) {
    return { array: array.map((item, i) => i === index ? {
      ...item,
      quantity: newQuantity
    } : item), type: "subtract", newQuantity, oldQuantity };
  } else {
    return { array, type: "", newQuantity, oldQuantity };
  }
};

CartItem.js

使用value属性和onChange支柱将输入转换为完全控制的输入。

<Quantity
  type="number"
  min="1"
  value={quantity}
  ref={itemRef}
  onChange={handleChange}
/>

演示

​

​

Answer 2

你需要做两件事，

<Quantity type='number' min='1' value={quantity} ref={itemRef} onChange={handleChange} />

1. 添加值支柱以使输入与上下文值保持同步。

1. 将onBlur替换为onChange。您需要这样做，以确保在输入中更改值更新上下文值。