Material UIベータ、グローバル検索テーブル

Question

最後のMaterial-UI反応コンポーネントライブラリを使用しており、テーブル全体でグローバル検索を追加しようとしています。私はグローバルと大文字と小文字を区別する動作に正規表現を使用しようとします。しかし、私はエラーをキャッチします：

match is not a function

マテリアルUIテーブルで検索を追加する方法を知っている人は誰ですか？

Online VS Code 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

matchstringないnumberのプロトタイプです。あなたのコードでDOC

フィルタがe paramは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'));