我在我的项目中使用react-table。
我有一个状态已分配给表的数据。在我的“总计”列中 我有可编辑的单元格,可以编辑data.total状态的值。
这里一切正常。更改后,我的state.data对象已更新。
但是我需要获取唯一更改的行,因此我的数据对象中的已编辑行不是所有数据对象。因为会有很多记录。
在我的saveChanges函数中,我不想获取它们。怎么可能呢?
export default class TestComponent extends Component {
constructor() {
super();
this.state = {
data: [],
};
this.renderEditable = this.renderEditable.bind(this);
this.saveUpdates = this.saveUpdates.bind(this);
}
saveUpdates() {
}
renderEditable(cellInfo) {
return (
<div
style={{ backgroundColor: "#fafafa" }}
contentEditable
suppressContentEditableWarning
onBlur={e => {
const re = /^[0-9\b,.]+$/;
if (e.target.innerHTML == "" || re.test(e.target.innerHTML)) {
const data = [...this.state.data];
console.log(e.target);
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState({ data });
} else {
alert("just numbers");
}
}}
dangerouslySetInnerHTML={{
__html: this.state.data[cellInfo.index][cellInfo.column.id]
}}
/>
);
}
render() {
const { data } = this.state;
return (
<div className="paymentList">
<div className="periodInfo">
<p><span>Payment Period:</span></p>
<p>{this.state.periodStartDate} - {this.state.periodEndDate}</p>
</div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name, Last Name",
accessor: "fullname",
resizable: false
{
Header: "Total",
accessor: "total",
Cell: this.renderEditable,
resizable: false
},
]
}
]}
defaultPageSize={10}
className=""
/>
<Row>
<Col>
<a onClick={saveUpdates}>Submit All</a>
</Col>
</Row>
</div>
);
}
}