ReactJS - столбец флажка в таблице реакции не работает
Я добавил редактируемую таблицу реакций ( 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>)},
}
updateMyData() запускается, когда фокус теряется из флажка и console.log печатает правильные данные,
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
})
)
}
Почему значения флажков не сохраняются в поле "данные"? Благодарность
1 ответ
Проблема заключалась в использовании атрибута "значение" флажка. Вместо этого, использование 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>)}
В этом вопросе есть более подробная информация, как установить флажок по умолчанию ReactJS?