React-Table可编辑单元格,如何仅获取更改的行?

时间:2019-05-29 06:30:52

标签: javascript reactjs react-table

我在我的项目中使用react-table。

我有一个状态已分配给表的数据。在我的“总计”列中 我有可编辑的单元格,可以编辑data.total状态的值。

这里一切正常。更改后,我的state.data对象已更新。

但是我需要获取唯一更改的行,因此我的数据对象中的已编辑行不是所有数据对象。因为会有很多记录。

在我的saveChanges函数中,我不想获取它们。怎么可能呢?

export default class TestComponent extends Component {
      constructor() {
        super();
        this.state = {
          data: [],
        };
        this.renderEditable = this.renderEditable.bind(this);
        this.saveUpdates = this.saveUpdates.bind(this);
      }

     saveUpdates() {

     }

      renderEditable(cellInfo) {
        return (
          <div
            style={{ backgroundColor: "#fafafa" }}
            contentEditable
            suppressContentEditableWarning
            onBlur={e => {
              const re = /^[0-9\b,.]+$/;
              if (e.target.innerHTML == "" || re.test(e.target.innerHTML)) {
                const data = [...this.state.data];
                console.log(e.target);
                data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                this.setState({ data });
              } else {
                alert("just numbers");
              }
            }}
            dangerouslySetInnerHTML={{
              __html: this.state.data[cellInfo.index][cellInfo.column.id]

            }}
          />
        );
      }


      render() {
        const { data } = this.state;
        return (
          <div className="paymentList">
            <div className="periodInfo">
                <p><span>Payment Period:</span></p>
                <p>{this.state.periodStartDate} - {this.state.periodEndDate}</p>
            </div>
            <ReactTable
              data={data}
              columns={[
                {
                  Header: "Name",
                  columns: [
                    {
                      Header: "First Name, Last Name",
                      accessor: "fullname",
                      resizable: false
                    {
                      Header: "Total",
                      accessor: "total",
                      Cell: this.renderEditable,
                      resizable: false
                    },
                  ]
                }
              ]}
              defaultPageSize={10}
              className=""
            />
            <Row>
              <Col>
                <a onClick={saveUpdates}>Submit All</a>
              </Col>
            </Row>
          </div>
        );
      }
    }

0 个答案:

没有答案