Question

我的React组件中有material-table。我想在单击按钮时将行动态添加到表中。我不确定如何使用material-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由州管理，为了使表重新呈现新数据，您应该将此数据重新设置为州：

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

单击按钮将数据推送到物料表

1 个答案: