React-data-grid: изменение цвета строки в зависимости от значения строки

Question

Мой компонент Test вызывается и получает в подпорку объект, содержащий данные из запроса mysql (Select * from db.mytable).Я храню this.props.data в состоянии и отображаю его в ReactDataGrid.

Я пытаюсь обновить и изменить цвет строки при изменении значения ячейки в моей ReactDataGrid.Например, если пользователь щелкает правой кнопкой мыши по строкам, появляется контекстное меню, и у него есть выбор между «Проверять» и «Снять отметку».Когда он нажимает кнопку «Проверить», я хочу обновить строку и сделать ее зеленой.

У меня есть база данных, в которой я сохраняю состояние «Проверено», поэтому, когда пользователь обновляет страницу, строка должна оставаться зеленой.

Как мне это сделать?

Answer 1

Поэтому, когда я нажимаю галочку в контекстном меню, вызывается эта функция, она обновляет мою таблицу состояний, содержащую строки:

 //right click then check
  rowCheck = (rowIdx) => {
    var tableState=this.state.tableState.concat([])
    tableState[rowIdx.rowIdx].CHECKED='Y'
    this.setState({tableState})
  }

функция RowsRenderer:

RowRenderer = ({ renderBaseRow, ...props }) => {
    const color = this.state.tableState[props.idx].CHECKED==='Y' ? "blue" : "";
    return <div style={{color}}>{renderBaseRow(props)}</div>;
  };

Сетка данных:

<ReactDataGrid
            columns={this.state.column}
            rowGetter={i => this.state.tableState[i]}
            rowsCount={this.state.tableState.length}
            minHeight={500} 

            enableCellSelect={true}
            onGridRowsUpdated={this.onGridRowsUpdated}
            cellNavigationMode={'changeRow'}

            rowRenderer={this.RowRenderer}

            contextMenu={
              <ExampleContextMenu
                onRowCheck={(e, {rowIdx})=>this.rowCheck({rowIdx})}
                onRowUncheck={(e, { rowIdx }) => this.rowUncheck({rowIdx})}
              />
            }
            RowsContainer={ContextMenuTrigger}

            rowSelection={{
              showCheckbox: true,
              enableShiftSelect: true,
              onRowsSelected: this.onRowsSelected,
              onRowsDeselected: this.onRowsDeselected,
              selectBy: {
                indexes: this.state.selectedIndexes
              }
            }}
          />