如何在反应中对表格内容应用过滤器 [英] How to apply filter on table contents in react

查看：35
本文介绍了如何在反应中对表格内容应用过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

import React, { Component } from 'react';从react-chartjs-2"导入{Doughnut}从redux"导入{bindActionCreators}；从'react-redux'导入{connect}；从'../actions/'导入{fetchBeacons}；const DummyDoughnutData = {标签:['信标 1 - 区域 a'，'信标 2 - 区域 c'，'信标 3 - 区域 a'，'信标 4 - 区域 b'，'信标 5 - 区域 b']，数据集:[{borderColor: 'rgba(255,255,255,.55)',数据:[30, 9, 17, 22, 11],背景颜色: ['#063e70','#107bb5','#1A1C1D','#666666','#2F4F4F']}],};//常量信标=[//{zone:"zone a", status: "active", _id:1},//{zone:"zone c", status: "active", _id:2},//{zone:"zone a", status: "active", _id:3},//{zone:"zone b", status: "active", _id:4},//{zone:"zone b", status: "active", _id:5},//{zone:"zone b", status: "active", _id:6},//{zone:"zone c", status: "active", _id:7}//];//类 BeaconZoneRow 扩展组件 {//    使成为() {//        返回 (//////{this.props.zone}//</th>//</tr>//)//}//}类 BeaconRow 扩展组件 {使成为() {返回 (<tr><td>{this.props.beacon.name}</td><td>{JSON.stringify(this.props.beacon.status)}</td><td>{this.props.beacon.zone.name} </td></tr>)}}类 BeaconList 扩展组件 {//排序 = (prop) =>{返回(a，b)=>a[prop].localeCompare(b[prop])};使成为() {常量行 = [];this.props.beacons.map(beacon => {return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)});返回 (<div className="col-lg-6"><table className="table"><头><tr><th>姓名</th><th>状态</th><th>Zone</th></tr></thead>{行}</tbody>

)}}类 BeaconDoughnutAnalysis 扩展组件 {使成为() {返回 (<div className="col-lg-6"><甜甜圈数据={DummyDoughnutData}/><br/><center>访问</center>

)}}类 BeaconListComponent 扩展组件 {构造函数(道具){超级(道具)；this.handleSubmit = this.handleSubmit.bind(this)}句柄提交(){this.props.router.push('/new-beacon');}componentWillMount = () =>{this.props.fetchBeacons();};使成为() {返回 (<div><div className="row"><div className="col-sm-5"><button className="btn btn-sm btn-info" onClick={this.handleSubmit}>添加信标</button>

<br/>{ this.props.beacons &&this.props.beacons.length >0 ?<div className="row"><BeaconList 信标={this.props.beacons}/><BeaconDoughnutAnalysis/>

:<center><h1>...加载</h1></center>}

)}}函数 mapStateToProps(state) {返回 {信标:state.beacons}}函数 matchDispatchToProps(dispatch){返回 bindActionCreators({fetchBeacons: fetchBeacons}, dispatch);}export default connect(mapStateToProps, matchDispatchToProps)(BeaconListComponent);

我从服务器获取了数据，我想知道如何使用 react redux 过滤表中的数据上面显示的代码使用正在显示的表，我想过滤其内容

解决方案

假设您将区域作为道具提供给 BeaconList 组件，您只需要在映射时提供检查，如下所示

class BeaconList extends Component {//排序 = (prop) =>{返回(a，b)=>a[prop].localeCompare(b[prop])};使成为() {常量行 = [];//假设您根据区域进行过滤，并且将要过滤的区域作为道具区域this.props.beacons.map(beacon => {if(beacon.zone === this.props.zone) {return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)}});返回 (<div className="col-lg-6"><table className="table"><头><tr><th>姓名</th><th>状态</th><th>Zone</th></tr></thead>{行}</tbody>
)}}

希望能帮到你

import React, { Component } from 'react';

import {Doughnut} from "react-chartjs-2"

import {bindActionCreators} from "redux";
import {connect} from 'react-redux';

import {fetchBeacons} from '../actions/';

const DummyDoughnutData = {
  labels: ['beacon 1 - zone a', 'beacon 2 - zone c', 'beacon 3 - zone a', 'beacon 4 - zone b', 'beacon 5 - zone b'],
  datasets: [
    {
      borderColor: 'rgba(255,255,255,.55)',
      data: [ 30, 9, 17, 22, 11],
      backgroundColor: [
		'#063e70',
		'#107bb5',
		'#1A1C1D',
		'#666666',
		'#2F4F4F'

		]
    }
  ],
};


// const beacons=[
//         {zone:"zone a", status: "active", _id:1},
//         {zone:"zone c", status: "active", _id:2},
//         {zone:"zone a", status: "active", _id:3},
//         {zone:"zone b", status: "active", _id:4},
//         {zone:"zone b", status: "active", _id:5},
//         {zone:"zone b", status: "active", _id:6},
//         {zone:"zone c", status: "active", _id:7}
// ];

// class BeaconZoneRow extends Component {
//     render() {
//         return (
//             <tr>
//                 <th colSpan="2">
//                     {this.props.zone}
//                 </th>
//             </tr>
//         )

//     }

// }

class BeaconRow extends Component {
    render() {
        return (
            <tr>
                 <td>{this.props.beacon.name}</td>
                <td>{JSON.stringify(this.props.beacon.status)}</td>
                <td> {this.props.beacon.zone.name} </td>
            </tr>
        )
    }
}

class BeaconList extends Component {

    // Sort = (prop) => { return (a,b) => a[prop].localeCompare(b[prop])};

    render() {
        const rows = [];

        this.props.beacons.map( beacon => {
            return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)
        });

        return (
            <div className="col-lg-6">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Zone</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        )


    }
}

class BeaconDoughnutAnalysis extends Component {
    render() {
        return (
            <div className="col-lg-6">
                <Doughnut data={DummyDoughnutData} />
                <br/>
                <center>visits</center>
            </div>
        )
    }
}


class BeaconListComponent extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(){
    this.props.router.push('/new-beacon');
  }

  componentWillMount = () => {
        this.props.fetchBeacons();
    };


    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-sm-5">
                        <button className="btn btn-sm btn-info" onClick={this.handleSubmit}> Add Beacon</button>
                    </div>
                </div>
                <br/>
                { this.props.beacons && this.props.beacons.length > 0 ?
                    <div className="row">
                        <BeaconList beacons={this.props.beacons}/>
                        <BeaconDoughnutAnalysis/>
                    </div> :
                    <center><h1>...Loading</h1></center>
                }
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        beacons: state.beacons
    }
}


function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchBeacons: fetchBeacons}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(BeaconListComponent);

i had fetched data from the server and i wanted to know how to filter that data in the table using react redux the code is shown above using which table is being displayed and i wanted to filter its contents

解决方案

Assuming you are providing the zone as a prop to the BeaconList component you just need to provide a check while mapping like below

class BeaconList extends Component {

    // Sort = (prop) => { return (a,b) => a[prop].localeCompare(b[prop])};

    render() {
        const rows = [];
        //Assuming you are filtering based on zone and you are giving the zone you want to filter as a prop zone

        this.props.beacons.map( beacon => {
            if(beacon.zone === this.props.zone) {
              return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)
            }
        });

        return (
            <div className="col-lg-6">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Zone</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        )


    }
}

I hope this helps

这篇关于如何在反应中对表格内容应用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆