Редактируемая ячейка React-таблицы, как получить только измененные строки? - PullRequest
Новая
       26

Редактируемая ячейка React-таблицы, как получить только измененные строки?

0 голосов
/ 29 мая 2019

Я использую реагирующую таблицу в своем проекте.

У меня есть данные в моем состоянии, назначенные моей таблице.В моем столбце «total» у меня есть редактируемая ячейка, в которой можно редактировать значение 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>
        );
      }
    }
...