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

Question

>我正在使用最后一个 Material-UI 反应组件库，并尝试通过整个表添加全局搜索。我尝试使用正则表达式来执行全局和区分大小写的行为。但是我会抓住错误：

匹配不是函数

谁知道更好的解决方案如何使用材料-UI表添加搜索。

在线 VS 代码 IDE

搜索字段功能部分

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})
}

Answer 1

match是string的原型，而不是number。.DOC

在代码中，当执行过滤器时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'));