reactjs - react-data-grid コンポーネントでの react-datepicker の使用

Question

react-data-gridコンポーネントを使用しています。編集およびその他の多くのオプションを備えたグリッド構造を提供します。各セルをクリックすると、セルの内容を編集できます。私のプロジェクトでは、日付列がフォーカスされているときに、ユーザーが日付を選択できる UI をバインドしたいという状況があります。そのために、react-datepickerを使用しました成分。日付列オプションで、react-datepicker コンポーネントをフォーマッターとして指定できます。反応するdatepickerコンポーネントで日付を変更できますが、それはセルの値を更新していません（コンソールのデータボタンをクリックすると、変更が更新されたかどうかを確認できます）。 react-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'));