1

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

4

1 回答 1

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上做了一个完整的例子

编辑 o7oy6j304z

于 2018-05-14T06:18:18.447 回答