Adazzle Grid OnEdit изменить ячейку Css

Question

Для реакции можно ли изменить цвет ячейки для компонента?Я знаю, что это очень легко сделать в Jquery, посмотрев на id / class элемента и добавив addClass, но как это сделать на реагировать?Я все еще выясняю изменения, что я могу думать о том, что я устанавливаю значение для состояния, но как я получаю затронутую ячейку и реализую состояние?Любая идея?Или есть ли лучшая сетка, которую я могу достичь, как то, что можно сделать в Jquery?

 constructor(props, context) {
        super(props, context);

        this.state = {
            cellUpdateCss: ""
        };
    }

handleGridRowsUpdated = ({ cellKey, fromRow, toRow, updated, action, originRow }) => {
        let rows = this.state.rows.slice();

        for (let i = fromRow; i <= toRow; i++) {
            let rowToUpdate = rows[i];
            let updatedRow = update(rowToUpdate, { $merge: updated });
            rows[i] = updatedRow;
            this.postToServer(updatedRow.data, JSON.stringify(updated));
        }

        this.setState({ rows });
    };

postToServer = (aX, vC) => {
        var self = this;
        axios.post(this.props.postApi, {
            axNo: aX,
            updated: vC
        })
        .then((response) => {
            console.log(response);
            self.setState({ cellUpdateCss: "green" });
        })
        .catch((error) => {
            console.log(error);
            self.setState({ cellUpdateCss: "red" });
        });
    }

render() {
     return (
      <ReactDataGrid
            onGridRowsUpdated={this.handleGridRowsUpdated} 
           />
      )
}

сторонняя сетка, которую я использую https://github.com/adazzle/react-data-grid

Answer 1

Вы можете сделать это, применив стиль к имени класса строки, в первую очередь, в функции handleGridRowsUpdated, вам нужно установить fromRow, toRow в состояние конструктора, затем нам нужно вызвать функцию changeStyle, которую я сделал с обратным вызовом setState.

  handleGridRowsUpdated = ({ cellKey, fromRow, toRow, updated, action, originRow }) => {
        let rows = this.state.rows.slice();

        for (let i = fromRow; i <= toRow; i++) {
            let rowToUpdate = rows[i];
            let updatedRow = update(rowToUpdate, { $merge: updated });
            rows[i] = updatedRow;
            this.postToServer(updatedRow.data, JSON.stringify(updated));
        }

        this.setState({ rows, fromRow: fromRow, toRow: toRow },()=>{
             this.changeStyle(); 
         });
    };

changeStyle функция, она изменит цвет редактируемой строки.

changeStyle = () => {
    var all = document.getElementsByClassName('react-grid-Row');
    for (var i = this.state.fromRow; i <= this.state.toRow; i++) {
      all[i].style.color = this.state.cellUpdateCss;
    }
  }

Я сделал полный пример на CodeSandbox