反应表搜索过滤器在控制台窗口上工作，但在反应表中它不显示过滤器数据

Question

我开始学习 reactjs，我已经使用 react 语义 UI 创建了 react 表，我编写的任何代码都适用于控制台日志，但在 UI 中不显示过滤器数据

在此箭头函数中，我将使用 console.log 选项查看过滤器名称值。 请检查下面的代码以获得更多理解。

filterList = e => {

}

import React, { Component } from 'react';
import { Table, Grid, Header, Button, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom';

export default class ProjectDashBoardList extends Component {
    constructor(props){
        super(props);
        let presets = {
            projectListArray: []
        }
        this.state = {
            filterData: [],
            value: ""
        }
        this.state = presets;
    }

    handleChange = e => {
        this.setState({
            filterData: this.state.projectListArray
        });
    };

    filterList = e => {
        const filterDataName = this.state.projectListArray.filter(item => {
            return ( item.customer_name.toLowerCase().search(e.target.value.toLowerCase()) !== -1 );
        });
        this.setState({ filterData: filterDataName });
        console.log('Filter Customer name:', filterDataName);
    };

    render(){
        const filterDataName = this.state.projectListArray            
        return(
            <div>
                <form>
                    <Input icon='search' placeholder='Search by name.' onClick={this.handleChange} onChange={this.filterList} className="searchfield" />
                </form>

                <Table celled selectable >
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell className="headId">Serial No</Table.HeaderCell>
                            <Table.HeaderCell>Customer</Table.HeaderCell>
                            <Table.HeaderCell>Project No</Table.HeaderCell>
                            <Table.HeaderCell>Start Date</Table.HeaderCell>
                            <Table.HeaderCell>Action</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        { filterDataName.map((item, index) => 
                        <Table.Row key={item.id} className="btnHover">
                            <Table.Cell>{item.id}</Table.Cell>
                            <Table.Cell >
                                <Link to={`./customer-details/${item.id}`}>{item.customer_name}</Link>
                            </Table.Cell>
                            <Table.Cell>{item.proj_id}</Table.Cell>
                            <Table.Cell>{item.start_date}</Table.Cell> 
                            <Table.Cell>
                                <Button positive onClick={item.skp_snap_url}>Download</Button>
                                <Button negative onClick={this.projectRemove(item)}>Delete</Button>
                            </Table.Cell>
                        </Table.Row>)}
                    </Table.Body>
                </Table>
            </div>
        )
    }
}

当我在搜索框中输入名称时，我想在表格中显示过滤器值。

Answer 1

只需维护您的unfiltered 变量中的所有数据projectListArray 并将其复制到filterData 变量中，一开始，使用filterData 渲染<Table.Row/>s。过滤projectListArray 并将其设置为filterData，就像您所做的那样。我不明白你projectListArray 来自哪里，我只是假设它来自props（如果我错了，请纠正我，会相应地编辑）

检查 codesandbox : https://codesandbox.io/s/hungry-boyd-5yqyn?fontsize=14

import React, { Component } from 'react';
import { Table, Grid, Header, Button, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom';

export default class ProjectDashBoardList extends Component {
    constructor(props){
        super(props);
        this.state = {
            filterData: props.projectListArray,
            value: ""
        }
    }

    handleChange = e => {
        this.setState({
            value: e.target.value,
            filterData : this.filterList(e.target.value)
        });
    };

    filterList = value => {
        return this.props.projectListArray.filter(item => {
            return ( item.customer_name.toLowerCase().search(value.toLowerCase()) !== -1 );
        });
    };

    render(){
        const filterDataName = this.state.filterData            
        return(
            <div>
                <form>
                    <Input icon='search' value={this.state.value} placeholder='Search by name.' onChange={this.handleChange} className="searchfield" />
                </form>

                <Table celled selectable >
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell className="headId">Serial No</Table.HeaderCell>
                            <Table.HeaderCell>Customer</Table.HeaderCell>
                            <Table.HeaderCell>Project No</Table.HeaderCell>
                            <Table.HeaderCell>Start Date</Table.HeaderCell>
                            <Table.HeaderCell>Action</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        { filterDataName.map((item, index) => 
                        <Table.Row key={item.id} className="btnHover">
                            <Table.Cell>{item.id}</Table.Cell>
                            <Table.Cell >
                                <Link to={`./customer-details/${item.id}`}>{item.customer_name}</Link>
                            </Table.Cell>
                            <Table.Cell>{item.proj_id}</Table.Cell>
                            <Table.Cell>{item.start_date}</Table.Cell> 
                            <Table.Cell>
                                <Button positive onClick={item.skp_snap_url}>Download</Button>
                                <Button negative onClick={this.projectRemove(item)}>Delete</Button>
                            </Table.Cell>
                        </Table.Row>)}
                    </Table.Body>
                </Table>
            </div>
        )
    }
}