Question

把这个弄得一团糟。该应用程序打开一个包含产品的列表，每个产品都有一个编辑按钮，您可以在其中通过输入更改信息，然后使用保存按钮保存该信息。但是状态不会自动更新，目前我无法在输入字段中输入任何内容。我已经弄了好几个小时了，并检查了React Forms教程，但是我仍然缺少一些东西。我已经有了一个表格，该表格可以创建产品并将其插入到列表中，并且我尝试过将其复制以进行产品编辑，但是没有用。如果您能找到问题，请先谢谢。

应用代码

import React from 'react';
import './App.css';
import ProductList from "../ProductList/ProductList";
import NewProd from "../NewProd/NewProd";
import ViewProd from "../ViewProd/ViewProd";
import EditProd from "../EditProd/EditProd";
import {BrowserRouter, Route} from "react-router-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            name: "", 
            ean: "", 
            type: "", 
            weight: "", 
            color: "", 
            active: false,
            products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
            {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
            {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
            {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
            {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
    };
};

handleFormSubmit = (e) => {
  e.preventDefault();
  let products = [...this.state.products];
  products.push({
      name: this.state.name,
      ean: this.state.ean,
      type: this.state.type,
      weight: this.state.weight,
      color: this.state.color,
      active: false,
  });
  this.setState({ products, 
    name: "", ean: "", type: "", weight: "", color: "", active: false}
  );
}
handleEditFormSubmit = (e) => {
  e.preventDefault();
  let products = [...this.state.products];
  products.splice(1, 1, {name: this.state.name,
    ean: this.state.ean,
    type: this.state.type,
    weight: this.state.weight,
    color: this.state.color,})
  this.setState({ products, name: "", ean: "", type: "", weight: "", color: ""}
  );
}

handleInputChange = (e) => {
    this.setState({...this.state,
    [e.target.name]: e.target.value})
  };

deleteProduct = (delIndex) => {
  let products = [...this.state.products].filter((product, index) => index !== delIndex);
  this.setState({ products });
};
isActive = () => {
  this.setState({active: !this.state.active})
}
setProductActive = (product, active) => {
  this.setState((state) => ({
    products: state.products.map(p => p.name === product.name ? { ...p, active } : p)
  }))
}

render() {
  return (
    <BrowserRouter>
    <div className="App">
      <ProductList products={this.state.products} 
      deleteProduct={this.deleteProduct}
      setProductActive={this.setProductActive} />
      <NewProd handleFormSubmit={this.handleFormSubmit}
      handleInputChange={this.handleInputChange}
      newName={this.state.name}
      newEan={this.state.ean}
      newType={this.state.type}
      newWeight={this.state.weight}
      newColor={this.state.color} />
      <Route path="/view" render={(props) => <ViewProd {...props} products={this.state.products} />} />
      <Route path="/edit" render={(props) => <EditProd {...props} products={this.state.products} 
      handleInputChange={this.handleInputChange}
      handleEditFormSubmit={this.handleEditFormSubmit}
      handleFormSubmit={this.handleFormSubmit}
      editName={this.state.name}
      editEan={this.state.ean}
      editType={this.state.type}
      editWeight={this.state.weight}
      editColor={this.state.color} />} />
    </div>
    </BrowserRouter>
  );
  }
}

export default App;

编辑产品代码

import React from "react";
import "./EditProd.css";
import {Link} from "react-router-dom";

class EditProd extends React.Component {
    render() { 
        const products = this.props.products;
        const index = this.props.location.state.prodIndex;
        return (
            <div>
                <h1>Edit Product</h1>
                <form onSubmit={this.props.handleEditFormSubmit} >
            <label htmlFor="name">Product Name: </label>
            <input id="editname" type="text" name="name" placeholder={products[index].name} value={this.props.editName} onChange={this.props.handleInputChange} />
            <label htmlFor="ean">EAN Code: </label>
            <input id="editean" type="text" name="ean" placeholder={products[index].ean} value={this.props.editEan} onChange={this.props.handleInputChange} />
            <label htmlFor="type">Product Type: </label>
            <input id="edittype" type="text" name="type" placeholder={products[index].type} value={this.props.editType} onChange={this.props.handleInputChange} />
            <label htmlFor="weight">Product Weight: </label>
            <input id="editweight" type="text" name="weight" placeholder={products[index].weight} value={this.props.editWeight} onChange={this.props.handleInputChange} />
            <label htmlFor="color">Product Color: </label>
            <input id="editcolor" type="text" name="color" placeholder={products[index].color} value={this.props.editColor} onChange={this.props.handleInputChange} />
            <button type="submit" value="Submit">Save</button>
            <Link to={{ pathname: "/"}} ><button>Close</button></Link>
        </form>
            </div>
        )
    }
};
export default EditProd;

产品列表代码

import React from "react";
import "./ProductList.css";
import {Link} from "react-router-dom";

class ProductList extends React.Component {
    render() { 
        const products = this.props.products;
        return (
            <div>
                <h1>Product List</h1>
                <table>
                    <tr>
                        <th>Name</th>
                        <th>EAN Code</th>
                        <th>Type</th>
                        <th>Weight</th>
                        <th>Color</th>
                        <th>Active</th>
                    </tr>
                    {products.map((product, index) => {
                        return (
                            <tr key={index}>
                                <td>{product.name}</td>
                                <td>{product.ean}</td>
                                <td>{product.type}</td>
                                <td>{product.weight}</td>
                                <td>{product.color}</td>
                                <td><input type="checkbox" checked={product.active} onChange={(e) => this.props.setProductActive(product, e.target.checked)} /></td>
                                <td><Link to={{ pathname: "/view", state: { prodIndex: index }}} ><button>View</button></Link></td>
                                <td><Link to={{ pathname: "/edit", state: { prodIndex: index }}} ><button>Edit</button></Link></td>
                                <td><button onClick={() => this.props.deleteProduct(index)}>Delete</button></td>
                            </tr>
                        )
                    })}
                </table>
            </div>
        )
    }
}
export default ProductList;

新产品代码

import React from "react";

class NewProd extends React.Component {
    render() {
        return (
            <div>
            <form onSubmit={this.props.handleFormSubmit}>
            <label htmlFor="name">Product Name: </label>
            <input id="name" type="text" name="name" value={this.props.newName} onChange={this.props.handleInputChange} />
            <label htmlFor="ean">EAN Code: </label>
            <input id="ean" type="text" name="ean" value={this.props.newEan} onChange={this.props.handleInputChange} />
            <label htmlFor="type">Product Type: </label>
            <input id="type" type="text" name="type" value={this.props.newType} onChange={this.props.handleInputChange} />
            <label htmlFor="weight">Product Weight: </label>
            <input id="weight" type="text" name="weight" value={this.props.newWeight} onChange={this.props.handleInputChange} />
            <label htmlFor="color">Product Color: </label>
            <input id="color" type="text" name="color" value={this.props.newColor} onChange={this.props.handleInputChange} />
            <button type="submit" value="Submit">Add New Product</button>
        </form>
        </div>
        )
    }
}
export default NewProd;

编辑：由于每个产品都是数组中的一个对象，是否有可能代替更新状态，而是根据索引删除特定的数组对象，并用更新的输入替换它？

Answer 1

问题是您使用输入的name来设置状态变量，但是状态变量的名称与输入中的名称完全不同。没有称为editName的状态变量， editEan，editType，editWeight，editColor，因此您想先进行更改

  <form onSubmit={this.props.handleEditFormSubmit}>
    <label htmlFor="name">Product Name: </label>
    <input id="editname" type="text" name="name" placeholder={products[index].name} value={this.props.editName} onChange={this.props.handleInputChange} />
    <label htmlFor="ean">EAN Code: </label>
    <input id="editean" type="text" name="ean" placeholder={products[index].ean} value={this.props.editEan} onChange={this.props.handleInputChange} />
    <label htmlFor="type">Product Type: </label>
    <input id="edittype" type="text" name="type" placeholder={products[index].type} value={this.props.editType} onChange={this.props.handleInputChange} />
    <label htmlFor="weight">Product Weight: </label>
    <input id="editweight" type="text" name="weight" placeholder={products[index].weight} value={this.props.editWeight} onChange={this.props.handleInputChange} />
    <label htmlFor="color">Product Color: </label>
    <input id="editcolor" type="text" name="color" placeholder={products[index].color} value={this.props.editColor} onChange={this.props.handleInputChange} />
    <button type="submit" value="Submit">Save</button>
    <Link to={{ pathname: "/"}} ><button>Close</button></Link>
</form>

第二，您需要先扩展状态，然后再将单个项目设置为状态

handleInputChange = (e) => {
  this.setState({...this.state,
     [e.target.name]: e.target.value})
  };

使用表单输入更新状态

1 个答案: