如何删除单元格中的按钮并将其替换为文本/数字？
如何删除单元格中的按钮并将其替换为文本/数字？
提问于 2019-05-23 16:55:54
我正在准备一个反应表，里面有一列按钮。单击时，会有另一列根据所单击的行号进行更新。
我想删除单独的列以显示数据，并让它更新其中包含按钮的列。因此，一旦单击，所获得的数据将替换该特定行中的按钮。我该怎么做呢？
这是我目前使用的表格格式。因此，当我点击按钮时，“上个月的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
};
}
);
}))
}状态“data”包含填充表所需的信息。
回答 1
Stack Overflow用户
发布于 2019-07-09 20:54:06
在数据数组中，可以添加默认情况下初始化为false的属性isClicked。然后，一旦单击它，就可以在handleButtonClick函数中将属性isClicked设置为true。
若要显示单元格内容，可以在isClicked属性上设置条件。如果是true，则显示最后一次调用信息。否则，您将显示该按钮。
数据数组：
const data = [
{ "click-me-button": "hi", lastapicalls: "now", isClicked: false },
{ "click-me-button": "hi", lastapicalls: "now", isClicked: false },
{ "click-me-button": "hi", lastapicalls: "now", isClicked: false }
];列定义：
render() {
return (
<div>
<ReactTable
data={this.state.data}
columns={[
{
Header: "Click to get API info",
accessor: "click-me-button",
Cell: row => this.renderApiInfo(row)
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
// Toggle content on idClicked property
renderApiInfo(row) {
if (row.original.isClicked) {
return (
<div style={{ textAlign: "center" }}>{row.original.lastapicalls}</div>
);
} else {
return (
<button onClick={e => this.handleButtonClick(e, row)}>Click Me</button>
);
}
}而且，单击按钮应该会更新存储在您的状态中的数据对象：
handleButtonClick(e, rowInfo) {
// In your then() scope after sending your axios request
const nextState = { ...this.state };
nextState.data[rowInfo.index].isClicked = true;
this.setState(nextState);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56271510
复制相关文章
相似问题
腾讯云开发者
