单击按钮将数据推送到材料表答案

【问题标题】：push data to material-table on button click单击按钮将数据推送到材料表
【发布时间】：2020-04-24 00:34:55
【问题描述】：

我的反应组件中有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>

【问题讨论】：

标签： reactjs material-table

【解决方案1】：

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

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

【讨论】：