我已经在项目中添加了可编辑的react-table(https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink),并且一切正常。但是,当我添加带有复选框的列并勾选复选框并转到另一个页面(或排序或搜索)并返回时,刻度消失了。这就是我将复选框添加到“列”字段的方式,
{
Header: 'On Leave',
accessor: 'onLeave',
Filter: SelectColumnFilter,
filter: 'includes',
disableGroupBy: true,
Cell: row => { return(
<div style={{'text-align':'center'}}>
<input type="checkbox"
value={row.value == "Yes" ? "on" : "off"}
onBlur={(event) => updateMyData(parseInt(row.row.id), row.column.id, event.target.checked ? "Yes" : "No")} />
</div>)},
}
当复选框失去焦点并且console.log打印正确的数据时,将触发updateMyData(),>
0 : 0 : onLeave : Yes 1 : 1 : onLeave : Yes 2 : 2 : onLeave : Yes 3 : 3 : onLeave : Yes 4 : 4 : onLeave : Yes
updateMyData()如下,
// When our cell renderer calls updateMyData, we'll use // the rowIndex, columnId and new value to update the // original data const updateMyData = (rowIndex, columnId, value) => { // We also turn on the flag to not reset the page skipResetRef.current = true setData(old => old.map((row, index) => { if (index === rowIndex) { console.log(index + " : " + rowIndex + " : " + columnId + " : " + value);); return { ...row, [columnId]: value, } } return row }) ) }
为什么复选框值未保存在“数据”字段中?谢谢
我已经在我的项目中添加了可编辑的react-table(https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink),一切正常。但是当我添加一列时...
问题出在使用复选框'value'属性。取而代之的是,使用“ defaultChecked”解决了问题,