javascript CRUD在州

Posted 2021-05-04

import React, { Component } from 'react';
 
//The reason to make a new componet is that it can have a selfcontained state
//with the products name and price
 
class ProductItem extends Component {
    constructor(props) {
        super(props);
 
        //Add an isEdit state to the component in the constructor.
        //Is going to tell if we are in normal mode or edit mode.
        this.state = {
            isEdit: false
        };
 
        this.onDelete = this.onDelete.bind(this);
        this.onEdit = this.onEdit.bind(this);
        this.onEditSubmit = this.onEditSubmit.bind(this);
    }
 
    //The onEditSubmit method
    //In productItem.js pass in the original name so we can find it in the full list that we need to edit.
        //Normally you would pass the  unik id in. An argument in the onEditSubmit.
    onEditSubmit(event) {
        event.preventDefault();
 
        //Get the value of the name and the price of the input with ref
        this.props.onEditSubmit(this.nameInput.value, this.priceInput.value, this.props.name);
 
        //set to false so it turn back when editing is finished.
        this.setState({ isEdit: false })
    }
 
    //The onEdit method
    onEdit() {
        //Start by setting isEdit to true.
        this.setState({ isEdit: true });
    }
 
    //onDelete method
    //Pass in the name to delete from App.js
    onDelete() {
        const { onDelete, name } = this.props;
 
        onDelete(name);
    }
 
    render() {
        //Get the name and price from props
        const { name, price } = this.props;
        return (
            <div className="App">
 
                {/*The edit mode*/}
                {
                    this.state.isEdit
                        ? (
                            <form onSubmit={this.onEditSubmit}>
                                <input placeholder="name" ref={nameInput => this.nameInput = nameInput} defaultValue={name} />
                                <input placeholder="price" ref={priceInput => this.priceInput = priceInput} defaultValue={price} />
                                <button>Save</button>
                            </form>
                        )
                        : (
 
                            <div>
                                <span>{name}</span>
                                {" | "}
                                <span>{price}</span>
                                {" | "}
                                <button onClick={this.onEdit}>Edit</button>
                                {" | "}
                                <button onClick={this.onDelete}>Delete </button>
                            </div>
                        )
                }
            </div>
 
        );
    }
}
 
export default ProductItem;

import React, { Component } from 'react';
import './App.css';
import ProductItem from './ProductItem';
import AddItem from './AddItem';
 
//Products for local storage
const products = [
  {
    name: "ipad",
    price: 200
  },
 
  {
    name: "iphone",
    price: 650
  }
];
 
//Set up local storage
localStorage.setItem("products", JSON.stringify(products));
 
class App extends Component {
  //Create state to store the products array. We read and write to state to make it simpler.
  //Whenever we read or write to state we can also write code to store it in the localstorage or a database.
  constructor(props) {
    super(props);
 
    //the state object
    this.state = {
 
      //Jason.parse to get it in javascript version
      //Getting data directly from local storage
      products: JSON.parse(localStorage.getItem("products"))
    };
    this.onDelete = this.onDelete.bind(this);
    this.onAdd = this.onAdd.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }
 
  onEditSubmit(name, price, originalName) {
    let products = this.getProducts();
 
    //If the product name equals the product name we pass in
    products = products.map(product => {
      if(product.name === originalName) {
        product.name = name;
        product.price = price;
      }
      return product;
    });
    //save it
    this.setState({ products });
  }
 
  //fetch/read data from local storage
  //The componentWillMount after we get the products
  componentWillMount() {
    const products = this.getProducts();
 
    this.setState({ products });
  }
 
  //Method for get products
  getProducts() {
    return this.state.products;
  }
 
  //Add method. The name and the price we want to add.
  onAdd(name, price) {
    //Add the product and price to the state.
    const products = this.getProducts();
 
    products.push({
      name,
      price
    });
 
    this.setState({ products });
  }
 
  //Delete method. This is where the product actually get deleted.
  onDelete(name) {
    //Get the list of products
    const products = this.getProducts();
 
    //We only want the product we DONT click to delete
    const filteredProducts = products.filter(product => {
      return product.name !== name;
    });
 
    //Set the state of products to the filtered products
    this.setState({ products: filteredProducts });
  }
 
  render() {
    return (
      <div className="App">
        <h1>Products Manager</h1>
 
      {/*AddItem component*/}
      {/*Pass the onAdd as a props into the component.*/}
      <AddItem
        onAdd={this.onAdd}
      />
 
        {/*Render products*/}
        {/*Pass the name and price. Evt. use the spred operater that parse them all at once
        {...product} */}
        {/*Pass the onEditSubmit into the ProductItem component from App.js(Write it in App.js)*/}
        {
          this.state.products.map(product => {
            return (
              <ProductItem
                key={product.name}
                name={product.name}
                price={product.price}
                onDelete={this.onDelete}
                onEditSubmit={this.onEditSubmit}
              />
 
            )
          })
        }
 
      </div>
    );
  }
}
 
export default App;

import React, { Component } from 'react';
 
class AddItem extends Component {
    constructor(props) {
        super(props);
 
        this.onSubmit = this.onSubmit.bind(this);
    }
 
    onSubmit(event) {
        event.preventDefault(); //Prevent page refresh.
 
        //Get the value of the name and the price of the input with ref
        this.props.onAdd(this.nameInput.value, this.priceInput.value);
 
        //clear the input fields after submit.
        this.nameInput.value = "";
        this.priceInput.value = " ";
    }
 
    render() {
 
        return (
            <form onSubmit={this.onSubmit}>
 
            <h3>Add Product</h3>
 
            {/*Add input with the placeholder name and price*/}
            <input placeholder="name" ref={nameInput => this.nameInput = nameInput} />
            <input placeholder="price" ref={priceInput => this.priceInput = priceInput} />
            <button>Add</button>
 
            {/*hr tag to seperate it from the list*/}
            <hr />
            </form>
        );
    }
}
 
export default AddItem;