Reactjs 材料UI测试版，带有全局搜索的表格

我正在使用上一个Material UI react组件库，并尝试在整个表中添加全局搜索。我尝试使用正则表达式来定义全局和区分大小写的行为。但我会抓住错误：

匹配不是一个函数

谁知道一个更好的解决方案如何添加搜索与材料用户界面表

搜索字段函数的一部分

 const columnData = [
  { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' },
  { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
  { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
  { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
  { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
];

 handleSearch = value => {
    const {searchValue, data} = this.state
    this.setState({searchValue: event.target.value})
    let filteredDatas = []
    filteredDatas = data.filter(e => {
        let mathesItems = Object.values(e)
        return mathesItems.some(e => {
            const regex = new RegExp(searchValue, 'gi')
            if (typeof e == 'string')
                return e.match(regex)
            else
              return false
        })
    })
    console.log(filteredDatas)
    this.setState({data: filteredDatas})
}

---

match

是

string

的原型，而不是

number

在您的代码中，当执行过滤器时，

e

参数是

string

以及

number

。 因此，

number

没有

match

功能。我已经通过标识类型进行了修改，然后相应地添加了逻辑。像

return arr.filter (e => {
    const regex = new RegExp(value, 'gi')
    if(typeof e == "string")
        return e.match(regex)
    else
        return false
   })

更新：

我无法保存实时代码，请使用下面的代码更新

index.js

文件。及其工作原理

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import keycode from 'keycode';
import Table, {
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  TableSortLabel,
} from 'material-ui/Table';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Paper from 'material-ui/Paper';
import Checkbox from 'material-ui/Checkbox';
import IconButton from 'material-ui/IconButton';
import DeleteIcon from 'material-ui-icons/Delete';
import FilterListIcon from 'material-ui-icons/FilterList';
import TextField from 'material-ui/TextField';

let counter = 0;
function createData(name, calories, fat, carbs, protein) {
  counter += 1;
  return { id: counter, name, calories, fat, carbs, protein };
}

const columnData = [
  { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' },
  { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
  { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
  { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
  { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
];

class EnhancedTableHead extends Component {
  static propTypes = {
    numSelected: PropTypes.number.isRequired,
    onRequestSort: PropTypes.func.isRequired,
    onSelectAllClick: PropTypes.func.isRequired,
    order: PropTypes.string.isRequired,
    orderBy: PropTypes.string.isRequired,
  };

  createSortHandler = property => event => {
    this.props.onRequestSort(event, property);
  };

  render() {
    const { onSelectAllClick, order, orderBy, numSelected, } = this.props;

    return (
      <TableHead>
        <TableRow>
          <TableCell checkbox>
            <Checkbox
              indeterminate={numSelected > 0 && numSelected < 5}
              checked={numSelected === 5}
              onChange={onSelectAllClick}
            />
          </TableCell>
          {columnData.map(column => {
            return (
              <TableCell
                key={column.id}
                numeric={column.numeric}
                disablePadding={column.disablePadding}
              >
                <TableSortLabel
                  active={orderBy === column.id}
                  direction={order}
                  onClick={this.createSortHandler(column.id)}
                >
                  {column.label}
                </TableSortLabel>
              </TableCell>
            );
          }, this)}
        </TableRow>
      </TableHead>
    );
  }
}

const toolbarStyleSheet = createStyleSheet(theme => ({
  root: {
    paddingRight: 2,
  },
  highlight:
    theme.palette.type === 'light'
      ? {
          color: theme.palette.accent.A700,
          backgroundColor: theme.palette.accent.A100,
        }
      : {
          color: theme.palette.accent.A100,
          backgroundColor: theme.palette.accent.A700,
        },
  actions: {
    color: theme.palette.text.secondary,
    marginLeft: 'auto'
  },
  title: {
    flex: '0 0 auto',
  },
}));

let EnhancedTableToolbar = props => {
  const { numSelected, classes, value, handleSearch} = props;

  return (
    <Toolbar
      className={classNames(classes.root, {
        [classes.highlight]: numSelected > 0,
      })}
    >
      <div className={classes.title}>
        {numSelected > 0
          ? <Typography type="subheading">
              {numSelected} selected
            </Typography>
          : <Typography type="title">Nutrition</Typography>}
      </div>
      <div className={classes.actions}>
        {numSelected > 0
          ? <IconButton aria-label="Delete">
              <DeleteIcon />
            </IconButton>
          : <div>
              <TextField  placeholder="Search" onChange={handleSearch} value={value}/>
              <IconButton aria-label="Filter list">
                <FilterListIcon />
              </IconButton>
            </div>
            }
      </div>
    </Toolbar>
  );
};

EnhancedTableToolbar.propTypes = {
  classes: PropTypes.object.isRequired,
  numSelected: PropTypes.number.isRequired,
};

EnhancedTableToolbar = withStyles(toolbarStyleSheet)(EnhancedTableToolbar);

const styleSheet = createStyleSheet(theme => ({
  paper: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
}));

class EnhancedTable extends Component {
  state = {
    order: 'asc',
    orderBy: 'calories',
    selected: [],
    searchValue: '',
    data: [
      createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
      createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
      createData('Eclair', 262, 16.0, 24, 6.0),
      createData('Cupcake', 305, 3.7, 67, 4.3),
      createData('Gingerbread', 356, 16.0, 49, 3.9),
    ],
    filterData: [
      createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
      createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
      createData('Eclair', 262, 16.0, 24, 6.0),
      createData('Cupcake', 305, 3.7, 67, 4.3),
      createData('Gingerbread', 356, 16.0, 49, 3.9),
    ],
  };

  handleRequestSort = (event, property) => {
    const orderBy = property;
    let order = 'desc';

    if (this.state.orderBy === property && this.state.order === 'desc') {
      order = 'asc';
    }

    const filterData = this.state.filterData.sort(
      (a, b) => (order === 'desc' ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy]),
    );

    this.setState({ filterData, order, orderBy });
  };

  handleSelectAllClick = (event, checked) => {
    if (checked) {
      this.setState({ selected: this.state.filterData.map(n => n.id) });
      return;
    }
    this.setState({ selected: [] });
  };

  handleKeyDown = (event, id) => {
    if (keycode(event) === 'space') {
      this.handleClick(event, id);
    }
  };

  handleClick = (event, id) => {
    const { selected } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1),
      );
    }

    this.setState({ selected: newSelected });
  };

  isSelected = id => this.state.selected.indexOf(id) !== -1;


   handleSearch = event => {
        const {data} = this.state
        let filteredDatas = []
        filteredDatas = data.filter(e => {
            let mathesItems = Object.values(e)
            let retVal = true;
            mathesItems.forEach(e => {
                const regex = new RegExp(event.target.value, 'gi')
                if (typeof e == 'string')
                    retVal = e.match(regex)
            })
            return retVal;
        })
        this.setState({filterData: filteredDatas, searchValue: event.target.value})
    }


  render() {
    const classes = this.props.classes;
    const { filterData, order, orderBy, selected } = this.state;

    return (
      <Paper className={classes.paper}>
        <EnhancedTableToolbar numSelected={selected.length} handleSearch={this.handleSearch} 
            value={this.searchValue} />
        <Table>
          <EnhancedTableHead
            numSelected={selected.length}
            order={order}
            orderBy={orderBy}
            onSelectAllClick={this.handleSelectAllClick}
            onRequestSort={this.handleRequestSort}

          />
          <TableBody>
            {filterData.map(n => {
              const isSelected = this.isSelected(n.id);
              return (
                <TableRow
                  hover
                  onClick={event => this.handleClick(event, n.id)}
                  onKeyDown={event => this.handleKeyDown(event, n.id)}
                  role="checkbox"
                  aria-checked={isSelected}
                  tabIndex="-1"
                  key={n.id}
                  selected={isSelected}
                >
                  <TableCell checkbox>
                    <Checkbox checked={isSelected} />
                  </TableCell>
                  <TableCell disablePadding>
                    {n.name}
                  </TableCell>
                  <TableCell numeric>
                    {n.calories}
                  </TableCell>
                  <TableCell numeric>
                    {n.fat}
                  </TableCell>
                  <TableCell numeric>
                    {n.carbs}
                  </TableCell>
                  <TableCell numeric>
                    {n.protein}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}

EnhancedTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

EnhancedTable = withStyles(styleSheet)(EnhancedTable);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <EnhancedTable />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
从“类名称”导入类名称；
从“道具类型”导入道具类型；
从“材质ui/样式”导入{withStyles，createStyleSheet}；
从“keycode”导入keycode；
导入表{
表体，
TableCell，
桌面，
TableRow，
表端口标签，
}来自“物料界面/表格”；
从“材料界面/工具栏”导入工具栏；
从“材料界面/排版”导入排版；
从“物料界面/纸张”导入纸张；
从“物料界面/复选框”导入复选框；
从“物料界面/图标按钮”导入图标按钮；
从“材料ui图标/删除”导入删除图标；
从“物料ui图标/过滤器列表”导入过滤器列表；
从“物料界面/文本字段”导入文本字段；
设计数器=0；
函数createData（名称、卡路里、脂肪、碳水化合物、蛋白质）{
计数器+=1；
返回{id:counter，name，carries，fat，carbs，protein}；
}
常量列数据=[
{id:'name'，numeric:false，disablePadding:true，label:'sarth（100g服务）'}，
{id:'carries'，numeric:true，disablePadding:false，label:'carries'}，
{id:'fat'，numeric:true，disablePadding:false，label:'fat（g）}，
{id:'carbs'，numeric:true，disablePadding:false，label:'carbs（g）}，
{id:'protein'，numeric:true，disablePadding:false，label:'protein（g）}，
];
类增强TableHead扩展组件{
静态类型={
numSelected:PropTypes.number.isRequired，
onRequestSort:PropTypes.func.isRequired，
选择单击：需要PropTypes.func.isRequired，
订单：PropTypes.string.isRequired，
orderBy:PropTypes.string.isRequired，
};
createSortHandler=property=>event=>{
this.props.onRequestSort（事件、属性）；
};
render（）{
const{onSelectAllClick，order，orderBy，numSelected，}=this.props；
返回(
0&&numSelected<5}
选中={numSelected==5}
onChange={onSelectAllClick}
/>
{columnData.map（column=>{
返回(
{column.label}
);
}，这个）}
);
}
}
const-toolbarStyleSheet=createStyleSheet（主题=>({
根目录：{
paddingRight:2，
},
突出：
theme.palette.type===“灯光”
? {
颜色：theme.palette.accent.A700，
背景色：theme.palette.accent.A100，
}
: {
颜色：theme.palette.accent.A100，
背景色：theme.palette.accent.A700，
},
行动：{
颜色：theme.palete.text.secondary，
marginLeft:“自动”
},
标题：{
flex:“0 0自动”，
},
}));
让EnhancedTableToolbar=props=>{
const{numSelected，class，value，handleSearch}=props；
返回(
0,
})}
>
{numSelected>0
? 
{numSelected}已选择
：营养}
{numSelected>0
? 
: 
}
);
};
EnhancedTableToolbar.propTypes={
类：PropTypes.object.isRequired，
numSelected:PropTypes.number.isRequired，
};
EnhancedTableToolbar=带有样式（Toolbar样式表）（EnhancedTableToolbar）；
const styleSheet=createStyleSheet（主题=>({
论文：{
宽度：“100%”，
marginTop:theme.space.unit*3，
溢出x:'自动'，
},
}));
类增强可扩展组件{
状态={
订单：“asc”，
订购人：“卡路里”，
选定：[]，
搜索值：“”，
数据：[
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（'Eclair'，262,16.0,24,6.0），
createData（'Cupcake'，305,3.7,67,4.3），
createData（'Gingerbread'，356,16.0,49,3.9），
],
过滤器数据：[
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（'Eclair'，262,16.0,24,6.0），
createData（'Cupcake'，305,3.7,67,4.3），
createData（'Gingerbread'，356,16.0,49,3.9），
],
};
HandlerRequestSort=（事件、属性）=>{
const orderBy=属性；
设顺序='desc'；
if（this.state.orderBy==property&&this.state.order===desc'）{
订单='asc'；
}
常量filterData=this.state.filterData.sort(
（a，b）=>（order=='desc'？b[orderBy]>a[orderBy]：a[orderBy]>b[orderBy]），
);
this.setState（{filterData，order，orderBy}）；
};
handleSelectAllClick=（事件，选中）=>{
如果（选中）{
this.setState（{selected:this.state.filterData.map（n=>n.id）}）；
返回；
}
this.setState（{selected:[]}）；
};
handleKeyDown=（事件，id）=>{
if（键码（事件）==‘空格’）{
this.handleClick（事件，id）；
}
};
handleClick=（事件，id）=>{
const{selected}=this.state；