我正在准备一个反应表,并且有一列按钮。单击时,另一列会根据单击的行号进行更新。
我想删除单独的列以显示数据并让它更新其中包含按钮的列。因此,一旦单击,获得的数据将替换该特定行中的按钮。我该怎么做呢?
这是我目前拥有的表格格式。因此,当我单击该按钮时,“上个月的 API 调用”会相应更新。
{
Header: 'Click to get API info',
accessor: 'click-me-button',
Cell: ({ row }) => (
<button onClick={(e) => this.handleButtonClick(e, row)}>Click Me</button>
)
},{
Header: 'API calls in last month',
accessor: 'lastapicalls',
Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>
}
我想删除“上个月的 API 调用”列,并使用通过单击按钮获得的信息更新“click-me-button”列(通过用获得的数据替换单击的按钮)
目前获取数据的代码如下
handleButtonClick(e, rowInfo) {
axios({
method: 'get',
url: 'http://localhost:8080/info/search/lastapicalls/'+rowInfo.tenant_domain,
auth: {
username: this.state.user,
password: this.state.pass,
}
})
.then(response => this.setState({ retrievedapicalls: response.data },
() => {
this.setState(oldState => {
let data = oldState.data.slice();
let copy = Object.assign({}, data[rowInfo._index]);
copy.lastapicalls = this.state.retrievedapicalls;
copy.selected = true;
data[rowInfo._index] = copy;
return {
data
};
}
);
}))
}
状态“数据”包含填写表格所需的信息。