Uso di react-datepicker nel comp. Reatt-data-grid

Question

Sto utilizzando il componente react-data-grid. Fornisce una struttura a griglia con modifica e molte più opzioni. Quando clicchiamo su ogni cella, siamo in grado di modificare il contenuto della cella. Nel mio progetto, ho una situazione come quando la colonna della data è focalizzata Voglio associare un'interfaccia utente in cui l'utente può selezionare la data. Per quello, ho usato il componente react-datepicker. Sono in grado di fornire il componente react-datepicker come formattatore nell'opzione della colonna della data. Posso modificare la data nel componente react datepicker, ma questo non sta aggiornando il valore della cella (quando fai clic sul pulsante dati della console puoi vedere le modifiche sono state aggiornate o meno) .so guys help me come posso può aggiornare il valore della cella quando viene selezionata una data diversa nel componente react-datepicker. Succede automaticamente quando il valore viene modificato in altre celle.

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

Ho riscontrato alcuni problemi durante il tentativo di riproduzione. Comunque, dopo alcune modifiche ho funziona benissimo: - ho rimosso la data casuale per evitare "Invalid Data" - Ho riparato il formattatore come questo

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

Tutto funziona bene, ma ho sempre ottenere l'avvertimento, a causa di i punti di forza delle tue colonne :(