我在next.js项目中使用react-bootstrap-table2-editor。
我有这个:
const columns = [
...
{
dataField: 'isActive',
sort: true,
text: 'Status',
formatter: (cell, row) => {
// console.log(cell, row)
return (
<span>
<Input type="checkbox" style={{ marginLeft: 90 }} checked={cell} onClick={() => saveChange(row)} ></Input>
</span>
);
},
},]
async function saveChange(row) {
.... making api call to save isActive status
}
当我单击此复选框字段时,它不会更改其值,并且表现为只读。正在调用saveChanges函数,并且api调用在这里正常工作,只是复选框不更改签入/取消签入的值。
基本上,我想在选择/取消选中此复选框后立即进行api调用以保存。
答案:
{
dataField: 'isActive',
sort: true,
text: 'Status',
editor: {
type: Type.CHECKBOX,
value: 'Y:N'
},
formatter: (cell, row, rowIndex) => {
// console.log(cell, row)
return (
<Input type="checkbox" style={{ marginLeft: 90 }} checked={cell} ></Input>
);
},
},
<BootstrapTable
striped
hover
condensed
pagination={paginationFactory()}
{...props.baseProps}
cellEdit={cellEditFactory({
mode: 'click', blurToSave: true,
afterSaveCell: (oldValue, newValue, row, column) => { saveChange(row) }
})}