Question

我正在使用react-data-grid组件。它提供了一个包含编辑和更多选项的网格结构。当我们点击每个单元格时，我们可以编辑单元格的内容。在我的项目中，我遇到的情况就像日期列聚焦时我想绑定一个UI，用户可以在其中选择日期。为此，我使用了react-datepicker组件。我能够在date列选项中将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'));

Answer 1

我尝试重现时会遇到一些问题。无论如何，经过一些改变我工作正常： - 我删除了随机日期以避免＆＃34;无效日期＆＃34; - 我修改了像这样的格式化程序

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

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

在react-data-grid compoent

1 个答案: