प्रतिक्रिया-डेटा-ग्रिड compoent

Question

में प्रतिक्रिया-डेटपिकर का उपयोग कर मैं react-data-grid घटक का उपयोग कर रहा हूं। यह संपादन और बहुत अधिक विकल्पों के साथ एक ग्रिड संरचना प्रदान करता है। जब हम प्रत्येक सेल पर क्लिक करते हैं, तो हम सेल की सामग्री को संपादित करने में सक्षम होते हैं। मेरी प्रोजेक्ट में, मेरे पास एक स्थिति है जैसे दिनांक कॉलम केंद्रित है, मैं एक यूआई बांधना चाहता हूं जहां उपयोगकर्ता दिनांक चुनने में सक्षम हो सकता है। इसके लिए, मैंने 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

जब मैंने पुन: उत्पन्न करने की कोशिश की तो मुझे कुछ मुद्दों का सामना करना पड़ा। वैसे भी, कुछ परिवर्तन के बाद मैं ठीक काम करता है: - मैं यादृच्छिक तारीख निकाला गया "अवैध तिथि" से बचने के लिए - मैं की तरह फ़ॉर्मेटर तय इस

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

सभी ठीक काम करता है, लेकिन मैं हमेशा वजह से, चेतावनी मिलती है आपके कॉलम के मुख्य प्रोप :(