javascript - 使用相同的表单添加新项目并编辑 React 中的现有项目

Question

我想使用相同的表单来添加新项目并更新现有项目。我试着自己做，不幸的是没有成功。我刚刚创建了方法 findItemToEdit，但我不知道如何将信息传递到现有表单、编辑它并更新项目。由于我是 React 的新手，所以我有点困惑。有人可以帮我吗，拜托。她是我的 context.js 文件：

    import React, { Component, createContext } from "react";
    import uuid from "react-uuid";
    import { warehouseProducts } from "./data";

    const ProductContext = createContext();

    class ProductProvider extends Component {
      state = {
        products: [],
        detailProduct: "",
        editItem: null,
      };

      componentDidMount() {
        this.setProducts();
      }

      setProducts = () => {
        let products = [];
        warehouseProducts.forEach((item) => {
          const singleItem = { ...item };
          products = [...products, singleItem];
        });
        this.setState(() => {
          return { products: products };
        });
      };

      getItem = (id) => {
        const product = this.state.products.find((item) => item.id === id);
        return product;
      };

      productDetailHandler = (id) => {
        const product = this.getItem(id);
        this.setState(() => {
          return { detailProduct: product };
        });
      };

      changeHandler = (event) => {
        const value = event.target.value;
        const { newProductItem } = this.state;
        this.setState({
          newProductItem: { ...newProductItem, [event.target.name]: value },
        });
      };

      addItemHandler = ( event, name, ean, type, weight, color, quantity, price, info) => {
        event.preventDefault();
        event.target.reset();
        const { newProductItem } = this.state;
        const products = [
          ...this.state.products,
          { ...newProductItem, id: uuid() },
        ];

        this.setState({ products, newProductItem: {} });
      };


      removeProduct = (id) => {
        const products = this.state.products.filter((item) => item.id !== id);
        this.setState({ products: products });
      };

      // find item for editing
      findItemToEdit = (id) => {
        const product = this.getItem(id);
        this.setState({ editItem: product });
      };



      render() {
        return (
          <ProductContext.Provider
            value={{
              ...this.state,
              productDetailHandler: this.productDetailHandler,
              changeHandler: this.changeHandler,
              addItemHandler: this.addItemHandler,
              removeProduct: this.removeProduct,
              findItemToEdit: this.findItemToEdit,
            }}
          >
            {this.props.children}
          </ProductContext.Provider>
        );
      }
    }

    const ProductConsumer = ProductContext.Consumer;

    export { ProductProvider, ProductConsumer };

和表单组件：

      import React, { Component } from "react";
      import { Link } from "react-router-dom";
      import { ProductConsumer } from "../../context";
      import "./ProductForm.css";

      class ProductForm extends Component {

        render() {
          return (
            <ProductConsumer>
              {(value) => (
                <form
                  className="Form"
                  onSubmit={value.addItemHandler}

                >
                  <h1>Item Input Form</h1>
                  <p>
                    Item Name{" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="text"
                      name="name"
                      value={value.products.name}
                      required
                    />
                  </p>
                  <p>
                    EAN{" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="text"
                      name="ean"
                      value={value.products.ean}
                      required
                    />
                  </p>
                  <p>
                    Type{" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="text"
                      name="type"
                      value={value.products.type}
                      required
                    />
                  </p>
                  <p>
                    Weight, kg{" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="number"
                      name="weight"
                      value={value.products.weight}
                      required
                    />
                  </p>
                  <p>
                    Color{" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="text"
                      name="color"
                      value={value.products.color}
                      required
                    />
                  </p>

                  <p>
                    Quantity{" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="number"
                      name="quantity"
                      value={value.products.quantity}
                      required
                    />
                  </p>
                  <p>
                    Price, ${" "}
                    <input
                      onChange={value.changeHandler}
                      className="Form_input"
                      type="number"
                      name="price"
                      value={value.products.price}
                      required
                    />
                  </p>

                  <p>
                    Description{" "}
                    <textarea
                      onChange={value.changeHandler}
                      className="Form_info"
                      type="text"
                      name="info"
                      value={value.products.info}
                      required
                    />
                  </p>

                  <div>
                    <button className="Btn" type="submit">
                      ADD
                    </button>
                    <Link to="/products">
                      <button className="Back">BACK TO PRODUCTS</button>
                    </Link>
                  </div>
                </form>
              )}
            </ProductConsumer>
          );
        }
      }

      export default ProductForm;

标签： javascriptreactjs