ReactJS - столбец флажка в таблице реакции не работает - PullRequest
Новая
       50

ReactJS - столбец флажка в таблице реакции не работает

0 голосов
/ 17 июня 2020

Я добавил в свой проект редактируемую таблицу реакций (https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink), и все работает нормально. Но когда я добавил столбец с флажками, установил флажки и go на другую страницу (или сортирую, или выполняю поиск) и вернулся, галочки исчезли. Вот как я добавил флажок в поле 'columns', 

{
   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 Ответ

0 голосов
/ 17 июня 2020

Проблема была в использовании атрибута checkbox 'значение'. Вместо этого, использование 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>)}

Этот вопрос содержит более подробную информацию, Как установить флажок по умолчанию Checked in ReactJS?

...