12

我正在使用react-data-grid组件。它提供了一个带有编辑和更多选项的网格结构。当我们点击每个单元格时，我们可以编辑单元格的内容。在我的项目中，我有一种情况，比如当日期列集中时我想绑定一个用户可以选择日期的 UI。为此，我使用了react-datepicker零件。我可以在日期列选项中将 react-datepicker 组件作为格式化程序。我可以更改 react 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'));
4

1 回答 1

3

我在尝试重现时遇到了一些问题。无论如何，经过一些更改后我工作正常： - 我删除了随机日期以避免“无效日期” - 我修复了这样的格式化程序

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

一切正常，但我总是收到警告，因为你的专栏的关键道具:(

于 2016-06-02T14:23:32.847 回答