如何增加和减少ReactJ的数量？

Question

我有一个按钮和一个输入表格。单击按钮时，我的产品数量减少1，并在提交表单时增加数量。数量随形式值增加。如何在ReactJ中完成此问题？

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

在这里，我编写了两个函数andledeled和retockiTem。将retockitem函数函数到您的按钮，然后尝试：

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

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

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

您必须在进行更改时设置库存状态，...库存正在破坏<<代码>库存对象将所有字段获取内部并仅更改数量字段，destreddefault只是我的习惯数量字段。

Answer 2

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

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