Reaksiyon veri ızgarası bileşiminde tepki-datepicker öğesini kullanma

Question

react-data-grid bileşenini kullanıyorum. Düzenleme ve çok daha fazla seçenek ile bir ızgara yapısı sağlar. Her bir hücreye tıkladığımızda, hücrenin içeriğini düzenleyebiliriz. Projemde, tarih sütununun odaklandığı gibi bir durumum var. Kullanıcının bu tarihi seçebildiği bir kullanıcı arayüzünü bağlamak istiyorum, bunun için react-datepicker bileşenini kullandım. Tarih sütunu seçeneğinde bir biçimlendirici olarak tepki-datepicker bileşenini verebiliyorum. Tepki datepicker bileşenindeki tarihi değiştirebilirim ancak bu hücrenin değerini güncellemiyor (konsol ver butonuna tıkladığınızda değişikliklerin güncellendiğini görebilirsin). tepki-datepicker bileşeninde farklı bir tarih seçildiğinde hücre değerini güncelleyebilir. Diğer hücrelerde değer değiştiğinde otomatik olarak gerçekleşir.

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

Yeniden oluşturmaya çalıştığımda bazı sorunlarla karşılaşıyorum. Neyse, bazı değişikliklerden sonra ben gayet iyi çalışıyor: - "Geçersiz Tarih" önlemek için rasgele bir tarih kaldırıldı - Ben gibi biçimlendirici sabit bu

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

Tüm çalışıyor, ama her zaman nedeniyle, uyarı almak sütunların anahtar sahne :(