如何使用 ReactJS 创建带有添加删除和搜索过滤器的可编辑表？

ReactJS 是一种流行的 JavaScript 库，它用于构建用户界面。通过使用 ReactJS，您可以创建具有添加删除和搜索过滤器的可编辑表格。这篇文章将向您介绍如何使用 ReactJS 来创建这样的表格。

1. 首先，您需要安装 ReactJS

使用 ReactJS 创建可编辑表的第一步是安装 ReactJS。您可以使用以下命令来安装。

npm install react react-dom

2. 创建表格组件

接下来，您需要创建一个新的 React 组件来表示您的表格。该组件需要负责显示表格数据以及将用户的更改反映回到应用程序状态。

import React, { Component } from 'react';

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { id: 1, name: 'John', age: 25 },
                { id: 2, name: 'Jane', age: 28 },
                { id: 3, name: 'James', age: 30 },
                { id: 4, name: 'Jake', age: 35 },
                { id: 5, name: 'Jim', age: 40 },
            ],
            editIdx: -1,
            search: '',
        };
        this.handleRemove = this.handleRemove.bind(this);
        this.startEditing = this.startEditing.bind(this);
        this.stopEditing = this.stopEditing.bind(this);
    }
    handleRemove(id) {
        this.setState((prevState) => ({
            data: prevState.data.filter((row) => row.id !== id),
        }));
    }
    startEditing(i) {
        this.setState({ editIdx: i });
    }
    stopEditing() {
        this.setState({ editIdx: -1 });
    }
    render() {
        const { data, editIdx, search } = this.state;
        const { columns } = this.props;
        const filterData = data.filter((row) =>
            columns.some(
                (column) =>
                    row[column].toString().toLowerCase().indexOf(search.toLowerCase()) > -1
            )
        );
        return (
            <div>
                <input
                    placeholder="Search"
                    value={search}
                    onChange={(e) => this.setState({ search: e.target.value })}
                />
                <table>
                    <thead>
                        <tr>
                            {columns.map((col, i) => (
                                <th key={i}>{col}</th>
                            ))}
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {filterData.map((row, i) => (
                            <tr key={i}>
                                {columns.map((column, j) => (
                                    <td key={j}>
                                        {editIdx === i ? (
                                            <input
                                                value={row[column]}
                                                onChange={(e) =>
                                                    this.setState((prevState) => ({
                                                        data: prevState.data.map((dataRow) =>
                                                            dataRow.id === row.id
                                                                ? { ...dataRow, [column]: e.target.value }
                                                                : dataRow
                                                        ),
                                                    }))
                                                }
                                            />
                                        ) : (
                                            row[column]
                                        )}
                                    </td>
                                ))}
                                <td>
                                    {editIdx === i ? (
                                        <button onClick={() => this.stopEditing()}>Save</button>
                                    ) : (
                                        <button onClick={() => this.startEditing(i)}>Edit</button>
                                    )}
                                    <button onClick={() => this.handleRemove(row.id)}>Delete</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        );
    }
}

export default Table;

在这个组件中，我们定义了初始数据，搜索，列编辑的实现逻辑，生成表格行以及删除等逻辑。

3. 在应用程序中使用表格组件

现在，您已经创建了一个组件来表示您的可编辑表格，接下来您需要在应用程序中使用这个组件。

import React from 'react';
import ReactDOM from 'react-dom';
import Table from './Table';

const columns = ['id', 'name', 'age'];

ReactDOM.render(<Table columns={columns} />, document.getElementById('root'));

结论

通过上面的步骤，我们成功创建了一个带有添加删除和搜索过滤器的可编辑表格。这只是一个简单的例子，但您可以根据需要对其进行扩展。ReactJS 使您可以轻松地构建灵活的用户界面，而不必担心底层的实现细节。