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;

Answer 1

您需要在状态下管理阵列数据，您需要： state = {data = []}，然后您的delete函数删除数组中的数据，然后您需要调用setState方法，该方法使用新数据合并渲染组件，并更新该组件，然后修改数组数据，然后调用setState和魔术发生了，您可以将数据赋值到构造函数中的componentDidMount方法中

如何在reactjs中动态添加，更新和删除表中的行

1 个答案: