javascript - reactjs中如何动态添加、更新和删除表中的行

Question

我是 reactJS 的新手。

在这里，我制作了一个文件，其中我制作了一个表格和表格。

我已经在表中添加了一些静态数据。但是，我想动态地添加、更新和删除行。

我怎样才能做到这一点？

这是我的代码，其中有插入、更新和删除功能。什么是正确的代码？提前致谢。

import React, { Component } from 'react';
import classes from './Product.css';
import { Link } from 'react-router-dom';

class Product extends Component {
    state = {
        name: '',
        category: '',
        price: '',
        formErrors: ''
    }

    handleUserInputs = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({ [name]: value });
    }

    insertHandler = (e) => {

        if (this.state.name === '' || this.state.name === null) {
            this.setState({ formErrors: 'Blank Name' });
        }
        else if ((this.state.category === '' || this.state.category === null)) {
            this.setState({ formErrors: 'Blank Category' });
        }
        else if (this.state.price === '' || this.state.price === null || typeof this.state.price === 'undefined') {
            this.setState({ formErrors: 'Blank Price' });
        }
        else if (!this.state.price.match(/^[0-9\b]+$/)) {
            this.setState({ formErrors: 'Price should be in digits only.' });
        }
        else {
            // insert code will be here
        }
        e.preventDefault();
    }
    editHandler = (e) => {        
        // update code will be here
    }
    deleteHandler = (e) => {        
        // delete row code will be here.
    }

    render() {
        const data = [
            {   "id": 1,             
                "name": "Chips",
                "category": "Food",
                "price": "20"               
            },
            {
                "id": 2, 
                "name": "Shirt",
                "category": "Clothes",
                "price": "500"   
            },
            {
                "id": 3, 
                "name": "Mobile",
                "category": "Electronics",
                "price": "10000"   
            }
          ];

        return (
            <div className={classes.main}>
                <div className={classes.Product}>
                    <div className={classes.product_box_body}>
                        <form className={classes.form} onSubmit={this.handleSubmit}>
                            <h2>Add Product</h2>
                            <div className={classes.name}>
                                <input type="text" name="name" className={classes.form_control} placeholder="Product Name" value={this.state.name} onChange={(e) => this.handleUserInputs(e)} />
                            </div>
                            <div className={classes.category}>
                                <select className={classes.form_control} name="category" onChange={(e) => this.handleUserInputs(e)} aria-required="true">
                                    <option value="">-- Select any Category --</option>
                                    <option value="Food">Food</option>
                                    <option value="Electronics">Electronics</option>
                                    <option value="Clothes">Clothes</option>
                                </select>
                            </div>
                            <div className={classes.price}>
                                <input type="text" name="price" className={classes.form_control} placeholder="Price" value={this.state.price} onChange={(e) => this.handleUserInputs(e)} />
                            </div>
                            <p className={classes.text_red}>{this.state.formErrors}</p> 
                            <button type="submit" className={classes.product} onClick={(e) => this.insertHandler(e)}>Insert</button>
                            <Link to="/login" className={classes.cancel}>Cancel</Link>
                        </form>
                    </div>
                </div>
                <div>
                    <table className={classes.table}>
                        <thead>
                            <tr>
                                <th style={{height: '50px'}}>Name</th>
                                <th style={{height: '50px'}}>Category</th>
                                <th style={{height: '50px'}}>Price</th>
                                <th style={{height: '50px'}}>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {data.map(obj => {
                            return (
                                <tr>
                                <td style={{width: '50px'}}>
                                    {obj.name}
                                </td>
                                <td style={{width: '50px'}}>
                                    {obj.category}
                                </td>
                                <td style={{width: '50px'}}>
                                    {obj.price}
                                </td>
                                <td style={{width: '120px'}}>
                                    <button type="submit" name="Edit" value="edit" onClick={(e) => this.editHandler(e)}>Edit</button> <button type="submit" name="Delete" value="delete" onClick={(e) => this.deleteHandler(e)}>Delete</button>
                                </td>
                                </tr>
                            );
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default Product;

标签： javascriptreactjs

Answer 1

你需要在状态下管理你的数组数据，你需要： state={data=[]} 然后你的删除函数擦除你的数组的数据，然后你需要调用 setState 方法来渲染 de 组件与新的数据合并和更新一样，你修改你的数组数据，然后调用 setState 和魔法发生，你可以在构造函数 o componentDidMount 方法中将你的数据声明为状态