javascript - 如何在 CustomToolBar 中单击刷新按钮时刷新 MUI DataTable 数据

Question

我是 React 新手，我并不完全了解组件和道具的流程。

如何在 CustomToolBar 中单击刷新按钮时刷新 MUI DataTable 数据？我在 DataTable 的 CustomToolBar 中创建了一个刷新按钮，并想更新 DataTable 中的数据。

这是我的 CustomToolBar 代码

  const defaultToolbarStyles = {
  iconButton: {
  },
};

class CustomToolbar extends React.Component {
  
  handleClick = () => {
    console.log("clicked on refresh button!");
  }

  render() {
    const { classes } = this.props;

    return (
      <React.Fragment>
        <Tooltip title={"custom icon"}>
          <IconButton className={classes.iconButton} onClick={this.handleClick}>
            <Refresh className={classes.deleteIcon} />
          </IconButton>
        </Tooltip>
        
      </React.Fragment>
      
    );
  }

}

export default withStyles(defaultToolbarStyles, { name: "CustomToolbar" })(CustomToolbar);

这是我的 client.jsx 代码

const clients = () => {
    const [isAlive, setIsAlive] = useState(true)
    const [userList, setUserList] = useState([])
    const columns = [
    {
        name: 'id', 
        label: 'Client Id',
        options: {
            display: false,
        },
    },
    {
        name: 'lastname',
        label: 'Client Name',
        options: {
            setCellProps: () => ({ style: { minwidth: '300px',  maxWidth: '500px', padding: '0px'}}),
            filter: true,
        },
    },
    {
        name: 'comment',
        label: 'Comment',
        options: {
           display: false,
        },
    },
    {
        label: "Actions",
        name: "name",
        options: {
            setCellProps: () => ({ style: { minwidth: "300px",  maxWidth: "400px", padding: '0px'}}),
            customBodyRender: (value, tableMeta, updateValue) => {
                
                return (
                    <Fragment>
                        {/* console.log(tableMeta.rowData) */}
                        {tableMeta.rowData !== undefined ?  <LeadDetails style={{border: '0px',  backgroundColor: 'white'}} leads = {tableMeta.rowData} /> : null}
                        {tableMeta.rowData[0] !== undefined ?  <AgentDialog style={{border: '0px',  backgroundColor: 'white'}} client_id = {tableMeta.rowData[0]} /> : null}
                    </Fragment>  
                
                )
            }
        }
    },
    ]

    useEffect(() => {
        Axios.get(clients_url).then(({ data }) => {
        console.log(data.data)
        if (isAlive) 
        {
            setUserList(data.data)
        }
        })
        return () => setIsAlive(false)
    }, [isAlive])
    return (
        <div className="m-sm-30">
            <div className="mb-sm-30">
                <Breadcrumb
                    routeSegments={[
                        { name: 'Clients Data', path: '/pages' },
                        { name: 'Clients' },
                    ]}
                />
            </div>
            <MUIDataTable
                title={'Clients'}
                // title={<div><button>Click Here</button>Leads Report</div>}
                data={userList}
                columns={columns}
                options={{
                    selectableRows: false, // set checkbox for each row
                    elevation: 0,
                    rowsPerPage: 10,
                    rowsPerPageOptions: [10, 20, 40, 80, 100],
                        customToolbar: () => {
                            return (
                              <CustomToolbar />
                            );
                          }
                    }}
            />
        </div>
    )
}
export default clients

标签： javascriptreactjs