Adazzle Grid OnEdit 更改单元格 Css

Question

对于 React，是否可以更改组件的单元格颜色？我知道在 Jquery 中通过查看元素的 id/class 并执行 addClass 是非常简单的方法，但是如何在 React 中做到这一点？我仍在弄清楚这些变化，我能想到的是我在状态上设置了值，但是我如何获得受影响的单元格并实现状态？任何的想法？或者有没有更好的网格可以像 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

您可以通过将样式应用于行 class 名称来实现，首先，在 handleGridRowsUpdated 函数中，您需要将 fromRow, toRow 设置为构造函数状态，然后我们需要调用我用 setState.

回调所做的 changeStyle 函数

  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

上做了一个完整的例子

Adazzle Grid OnEdit 更改单元格 Css

Adazzle Grid OnEdit change cell Css

reactjs

axios

react-data-grid