前端项目实战伍拾柒react-admin+material ui-踩坑-进行过滤操作tab全

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

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