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来渲染{{ 1}} s。过滤filterData，然后将其设置为<Table.Row/>。我不知道您projectListArray的来源，我只是假设它来自filterData（如果我输入错了，请纠正我，将进行相应的编辑）

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

props

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

1 个答案: