如何用React-Admin和Material-UI实现前端项目实战伍拾柒的过滤操作Tab全改写？

本文共计317个文字，预计阅读时间需要2分钟。

我是歌谣+放弃很容易+但坚持一定很酷+微信公众号关注前段小歌谣+带你加入前端高峰人才交流群+import React, { Fragment, useState } from 'react'+import { List, Datagrid, TextField, EditButton, DeleteButton }+from 'react-admin'

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 带你加入前端巅峰人才交流群

import React, { Fragment, useState } from 'react' import { List, Datagrid, TextField, EditButton, DeleteButton, BooleanField } from 'react-admin' import { makeStyles, useMediaQuery, Divider, Tabs, Tab } from "@material-ui/core"; const GeyaoList = () => { const [userTab, setUserTab] = useState<any>([ { id: true, name: "肯定" }, { id: false, name: "否定" }, ]) const [flag, setFlag] = useState<any>({}) const handleChange=(event:any,value:any)=>{ console.log(event,value,"geyao") setFlag(value) } return ( <Fragment> <Tabs variant="fullWidth" centered value={flag} indicatorColor="primary" onChange={handleChange} > {userTab.map((choice: any) => ( <Tab key={choice.id} label={choice.name} value={choice.id} /> ))} </Tabs> <List exporter={false} filter={{flag}}> <Datagrid> <TextField source='id'></TextField> <TextField source='name'></TextField> <TextField source='sex'></TextField> <TextField source='salary'></TextField> <BooleanField source='flag'></BooleanField> <EditButton></EditButton> <DeleteButton></DeleteButton> </Datagrid> </List> </Fragment> ) } export default GeyaoList