内联编辑

Question

嗨，我有localStorage，我在列表中显示了它，有两个输入元素：价格和数量。 我想允许在不重定向到其他表单的情况下对其进行编辑。 我想编辑列表中的价格和数量（内联编辑）。 现在这是我的代码：

const ProductsPreview = (props) => {
  const [deleted, setDelete] = useState(false);
  const [products, setProducts] = useState({});

  useEffect(() => {
    let locProducts = localStorage;
    setProducts(locProducts);
  });

  function setNewQuantity(event) {
    setProducts({ ...products, quantity: event.target.value });
  }

  function setNewPrice(event) {
    setProducts({ ...products, price: event.target.value });
  }

  function saveInlineEdits(event) {
    localStorage.setItem(JSON.stringify(products));
  }

  function deleteHandler(key) {
    localStorage.removeItem(key);
    setDelete(!deleted);
    alert('Product with id: ' + key + ' deleted!');
  }
  return (
    <ProductList
      saveInlineEdits={saveInlineEdits}
      setNewQuantity={setNewQuantity}
      setNewPrice={setNewPrice}
      products={products}
      setProducts={setProducts}
      deleteHandler={deleteHandler}
    ></ProductList>
  );
};

const ProductList = (props) => {
  return (
    <div style={style.container}>
      <TableHeader></TableHeader>
      {Object.entries(props.products).map(([key, valueJSON]) => {
        const value = JSON.parse(valueJSON);
        return (
          <div
            id={key}
            key={key}
            style={
              value.quantity <= 0 ? style.highlight : style.gridItemsContainer
            }
          >
            <p>{value.name}</p>
            <p>{value.ean}</p>
            <p>{value.type}</p>
            <p>{value.weight}</p>
            <p>{value.color}</p>
            <input defaultValue={value.price} onChange={props.setNewPrice} />
            <input
              defaultValue={value.quantity}
              onChange={props.setNewQuantity}
            />
            <input
              defaultChecked={value.active}
              onChange={value.active}
              type="checkbox"
            />
            <Link style={style.viewButton} to={'/products/' + key}>
              VIEW
            </Link>
            <Link style={style.editButton} to={'/products/' + key + '/edit'}>
              EDIT
            </Link>
            <button
              style={style.deleteButton}
              onClick={() => props.deleteHandler(key)}
            >
              DELETE
            </button>
          </div>
        );
      })}
      <Link style={style.addProductButton} to="/products/create">
        Add new product
      </Link>
      <button
        style={{ position: 'absolute', marginTop: '50px' }}
        onClick={() => props.saveInlineEdits}
      >
        Save Inline Edits
      </button>
    </div>
  );
};

Red Baron提供的已编辑代码。 如何在不使用密钥的情况下保存localStorage并将其设置为产品状态？

Answer 1

如果要允许编辑，请更改此内容：

<input value={value.price} />

成为：<input defaultValue={value.price} />

然后记住使用它设置状态，以便捕获新输入

<input defaultValue={value.price} onChange={(e) => setNewInput(e.target.value)}/>

然后，在获得新输入后，在某处点击save并将其重新保存到localStorage