Używanie reaguj-datepicker w komponencie react-data-grid

Question

Używam komponentu react-data-grid. Zapewnia strukturę siatki z możliwością edycji i wiele więcej opcji. Po kliknięciu każdej komórki możemy edytować zawartość komórki. W moim projekcie mam sytuację taką jak przy ustawieniu kolumny daty Chcę powiązać interfejs użytkownika, w którym użytkownik może wybrać datę. Do tego użyłem komponentu react-datepicker. Jestem w stanie podać komponent reag-datepicker jako formatter w opcji kolumny daty. Mogę zmienić datę w komponencie datepicker, ale to nie aktualizuje wartości komórki (po kliknięciu na przycisk danych konsoli można zobaczyć zmiany zostały zaktualizowane lub nie). może aktualizować wartość komórki, gdy wybrana jest inna data w komponencie reag-datepicker. Dzieje się to automatycznie, gdy wartość zmieni się w innych komórkach.

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

Występują pewne problemy, gdy próbowałem odtworzyć. W każdym razie, po kilku zmianach I działa prawidłowo: - usunąłem losową datę, aby uniknąć „Nieprawidłowa data” - Naprawiłem formater takiego

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

Wszystko działa dobrze, ale zawsze pojawia się ostrzeżenie, z powodu kluczowe podpórki twoich kolumn :(