单击按钮时将数据推送到 material-table

Question

我的 React 组件中有 material-table。我想在单击按钮时动态地向 table 添加行。我不确定如何在使用 material-table

单击按钮时将数据推送到 table

const{data, columns} = this.state;

const addMore = () => {
    data.push({ code: 'Mehmet', barCode: 'Baran', id: '1987', type: '63', createdBy: 'test' });
    console.log("push complete");
}

........

<Grid item xs={12} md={6}>
   <Button
       className={classes.button}
       color="secondary"
       variant="contained"
       onClick={addMore}
    >Add Morer</Button>
</Grid>

<Grid item xs={12}>
                <MaterialTable
                    icons={tableIcons}
                    title="Offers"
                    columns = {columns}
                    data={data}
                    actions={[
                        {
                          icon: 'delete',
                          tooltip: 'Remove',
                          onClick: (event, rowData) => confirm("You want to delete " + rowData.name)
                        }
                    ]}
                />
            </Grid>

Answer 1

由于您的 data 由您的州管理，为了使用新数据重新呈现您的 table 您应该将此数据设置回您的州：

const addMore = () => {
    const newRow = { code: 'Mehmet', barCode: 'Baran', id: '1987', type: '63', createdBy: 'test' }
    this.setState({data: data.concat( newRow )})
}

单击按钮时将数据推送到 material-table

push data to material-table on button click

reactjs

material-table