Question

我正在使用React Bootstrap table。当我在列表中添加项目时，我使用local storage来保存这样的数据：

componentDidUpdate() {       
        localStorage.setItem('items', JSON.stringify(this.state.items))                
}

现在，我想用cellEdit编辑bootstrap表格的数据：

<BootstrapTable data={this.props.items} cellEdit={this.cellEdit}>
       <TableHeaderColumn isKey='true' dataField='id'>Id</TableHeaderColumn>
       <TableHeaderColumn  dataField='content' dataSort={true} >Titre</TableHeaderColumn>
       <TableHeaderColumn  dataField='reference'>Réference</TableHeaderColumn>     
       <TableHeaderColumn dataField='docLibelle' >Libellé du document </TableHeaderColumn>  
       <TableHeaderColumn dataField='filePath' dataFormat={this.linkFormatter} >Url du document </TableHeaderColumn>                         
 </BootstrapTable>   

 cellEdit = {
    mode: 'click', // click cell to edit
    afterSaveCell: this.afterSaveCell
};

afterSaveCell(row, cellName, cellValue, newText) { 
    localStorage.setItem("items", JSON.stringify(this.state.itemsUpdate));
}

所以，首先我有一个错误：

这是未定义的。

然后，我不知道它是否是解决方案，因为它不起作用。帮助我，谢谢。

Answer 1

原因是，您忘记bind cellEdit事件，请使用此处：

cellEdit={this.cellEdit.bind(this)}

Answer 2

感谢您的回答

我修改了这个：

cellEdit = {
    mode: 'click', // click cell to edit
    afterSaveCell: this.afterSaveCell.bind(this)
};

这个概念有效，当我编辑数据时，本地存储会发生变化。但是我的状态是空的，这是正常的，因为：

public constructor(props: Props) {
    super(props)
    this.state = {           
        itemsUpdate: []           
    }
}

但是，我不知道如何编辑数据。你有什么想法吗？谢谢

React：编辑数据并保存在本地存储上

2 个答案: