Использование response-datepicker в компоненте grid-data-grid

Question

Я использую компонент реагирующих данных-сетки. Он обеспечивает сетку с редактированием и множеством опций. Когда мы нажимаем на каждую ячейку, мы можем редактировать содержимое ячейки. В моем проекте возникает ситуация, когда столбец даты ориентирован, и я хочу привязать пользовательский интерфейс, где пользователь может выбрать дату. Для этого я использовал компонент реагировать на дату. Я могу дать компонент response-datepicker в качестве средства форматирования в опции столбца даты. Я могу изменить дату в компоненте datepicker реагировать, но это не обновляет значение ячейки (когда вы нажимаете на кнопку данных консоли, вы можете видеть, были ли изменения обновлены или нет). Так что, ребята, помогите мне, как я может обновить значение ячейки, когда в компоненте response-datepicker выбрана другая дата. Это происходит автоматически при изменении значения в других ячейках.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import DatePicker from 'react-datepicker';
import moment from 'moment';


//helper to generate a random date
function randomDate(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
}

//helper to create a fixed number of rows
function createRows(numberOfRows){
  var _rows = [];
  for (var i = 1; i < numberOfRows; i++) {
    _rows.push({
      id: i,
      task: 'Task ' + i,
      startDate: randomDate(new Date(2015, 3, 1), new Date())
    });
  }
  return _rows;
}

//function to retrieve a row for a given index
var rowGetter = function(i){
  return _rows[i];
};

//renders react datepicker component
var ExampleDate = React.createClass({
  displayName: 'Example',

  getInitialState: function() {
    return {
      startDate:moment(this.props.value,"MM-DD-YYYY")
    };
  },

  consoleDate:function(){
      console.log(this.state.startDate);
  },

  handleChange: function(date) {
    this.setState({
      startDate: date
    });
  },

  render: function() {
    return (
     <div>
       <DatePicker selected={this.state.startDate} onChange={this.handleChange} />
     </div>
    );

  }
});

//Columns definition
var columns = [
    {
      key: 'id',
      name: 'ID',
      width: 80
    },
    {
      key: 'task',
      name: 'Title',
      editable : true,
      width:100
    },
    {
      key: 'startDate',
      name: 'Start Date',
      editable : true,
      formatter:<ExampleDate />,
      width:100
    }
]

var Example = React.createClass({

  getInitialState : function(){
    return {rows : createRows(5)}
  },

  rowGetter : function(rowIdx){
    return this.state.rows[rowIdx]
  },

  handleRowUpdated : function(e){
    //merge updated row with current row and rerender by setting state
    var rows = this.state.rows;
    Object.assign(rows[e.rowIdx], e.updated);
    this.setState({rows:rows});
  },

  output:function(){
    console.log(this.state.rows);
  },

  render:function(){
    return(
       <div>
          <ReactDataGrid
          enableCellSelect={true}
          columns={columns}
          rowGetter={this.rowGetter}
          rowsCount={this.state.rows.length}
          minHeight={200}
          onRowUpdated={this.handleRowUpdated} />
          <button onClick={this.output} > Console data </button>
       </div>
    )
  }

});

ReactDOM.render(<Example />, document.getElementById('container'));

Answer 1

Я столкнулся с некоторыми проблемами, когда пытался воспроизвести. Во всяком случае, после некоторых изменений я работаю нормально: - Я удалил случайную дату, чтобы избежать "Недопустимая дата" - Я исправил форматер, как это

formatter: ({value}) => <ExampleDate value={value} />

Все работает нормально, но я всегда получаю предупреждение из-за ключевых подпорок ваших столбцов:(