reactjs如何增减数量？

Question

我有一个按钮和一个输入表单。 单击按钮时，我的产品数量减少 1，提交表单时数量增加。 数量随着形式价值的增加而增加。 Reactjs如何完成这道题？

import React, { useEffect, useState } from "react";

const InventoryDetails = () => {
  const [inventory, setInventory] = useState({});

  useEffect(() => {
    const url = `inventory.json`;

    fetch(url)
      .then((res) => res.json())
      .then((data) => setInventory(data));
  }, []);

  const handleDelivered = () => {
    // can't understand what can I do here.
  };
  const restockItem = () => {};

  return (
    <div>
      <div>
        <h6> Quantity: {inventory.quantity} </h6>

        <button onClick={handleDelivered}>Delivered</button>
      </div>

      <div>
        <h3>Restock the items</h3>
        <form onSubmit={restockItem}>
          <input
            type="number"
            name="number"
            id=""
            placeholder="Enter quantity"
            required
          />

          <input className="" type="submit" value="Restock" />
        </form>
      </div>
    </div>
  );
};

Answer 1

这里我写了两个函数handleDelivered和restockItem 。 将restockItem function 放入您的按钮并尝试：

handleDelivered = () => {
    setInventory({
        ...inventory,
        quantity: inventory.quantity - 1,
    });
};

restockItem = (event) => {
    event.preventDefault();

    setInventory({
        ...inventory,
        quantity: inventory.quantity + parseInt(event.target[0].value),
    });
};

当你要进行更改时，你必须设置库存的 state， ...inventory正在破坏inventory object 以获取其中的所有字段并仅更改quantity字段， preventDefault只是我防止提交的习惯，不要'不要忘记键入检查数量字段。

Answer 2

您可以使用这些技巧来解决这个问题 -

1. 当您从库存中添加或删除数量时，您还可以使用“PUT”方法更新数据库，并设置对产品使用效果的依赖性。 因此，当产品数据在数据库中更新时，由于依赖关系，它也会在 UI 中更新。