[英]ReactJS - Checkbox column in react-table doesn't work
I have added an editable react-table ( https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink ) to my project and everything works fine.我在我的项目中添加了一个可编辑的反应表( https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink ),一切正常。 But when I added a column with checkboxes, and tick the checkboxes and go to a different page (or sort or search) and come back, ticks are gone.
但是,当我添加一个带有复选框的列,并将复选框和 go 勾选到另一个页面(或排序或搜索)并返回时,勾选消失了。 This is how I have added the checkbox to the 'columns' field,
这就是我将复选框添加到“列”字段的方式,
{
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() is fired when focus is lost from checkbox and console.log prints correct data, updateMyData() 在复选框丢失焦点并且 console.log 打印正确数据时触发,
0 : 0 : onLeave : Yes
1 : 1 : onLeave : Yes
2 : 2 : onLeave : Yes
3 : 3 : onLeave : Yes
4 : 4 : onLeave : Yes
updateMyData() is as follows, 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
})
)
}
Why is the checkbox values not saved in 'data' field?为什么复选框值未保存在“数据”字段中? Thanks
谢谢
Problem was with using checkbox 'value' attribute.问题在于使用复选框“值”属性。 Instead of that, using 'defaultChecked' solved the problem,
取而代之的是,使用“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>)}
This question has more details, How to set default Checked in checkbox ReactJS?这个问题有更多细节, 如何设置默认选中复选框 ReactJS?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.