Javascript react表中的ReactJS-Checkbox列不工作
我已经在我的项目中添加了一个可编辑的react表,一切正常。但是当我添加了一个带有复选框的列,并勾选复选框,然后转到另一个页面或排序或搜索并返回时,勾号就消失了。这就是我将复选框添加到“columns”字段的方式Javascript react表中的ReactJS-Checkbox列不工作,javascript,reactjs,react-table,react-table-v7,Javascript,Reactjs,React Table,React Table V7,我已经在我的项目中添加了一个可编辑的react表,一切正常。但是当我添加了一个带有复选框的列,并勾选复选框,然后转到另一个页面或排序或搜索并返回时,勾号就消失了。这就是我将复选框添加到“columns”字段的方式 { Header: 'On Leave', accessor: 'onLeave', Filter: SelectColumnFilter, filter: 'includes', disableGroupBy: true, Cell: row =&
{
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>)},
}
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
})
)
}
为什么复选框值未保存在“数据”字段中?谢谢问题在于使用复选框“值”属性。相反,使用“defaultChecked”解决了问题
Cell: row => {
return(
<div style={{'text-align':'center'}}>
<input type="checkbox"
defaultChecked={row.value == "Yes" ? true : false}
onBlur={(event) => updateMyData(parseInt(row.row.id), row.column.id, event.target.checked ? "Yes" : "No")} />
</div>)}
这个问题有更详细的内容,,
Cell: row => {
return(
<div style={{'text-align':'center'}}>
<input type="checkbox"
defaultChecked={row.value == "Yes" ? true : false}
onBlur={(event) => updateMyData(parseInt(row.row.id), row.column.id, event.target.checked ? "Yes" : "No")} />
</div>)}