React.js एक संपादन योग्य कॉलम

Question

के साथ गतिशील राशि वाली तालिका के साथ एक तालिका बना रहा है, मैं एक printlet मानचित्र बनाने के साथ एक प्रतिक्रिया.जेएस तालिका बनाने की कोशिश कर रहा हूँ। मेरे पास यह डेटा है और मैं डेटा को सही तरीके से प्राप्त करने में सक्षम हूं, लेकिन मैं तालिका को सही तरीके से नहीं बना सकता। मैं हेडर देखने में सक्षम हूं क्योंकि वे हार्डकोड हैं, लेकिन मैं पंक्तियों को देखने में सक्षम नहीं हूं। मेरे पास कोड में console.log() बिंदुओं पर डेटा को समझाने के लिए एक तस्वीर भी है।

/* Table React Component */ 
var TABLE_CONFIG = { 
    sort: { column: "Zone", order: "desc" }, 
    columns: { 
    col1: { name: "Zone", filterText: "", defaultSortOrder: "desc" }, 
    col2: { name: "Population", filterText: "", defaultSortOrder: "desc" } 
    } 
}; 

var Table = React.createClass({ 
    getInitialState: function() { 
    var tabledata = []; 
    var length = _.size(testJSON.zones); 
    for(i = 0; i < length; i++) { 

     var name = _.keys(testJSON.zones)[i]; 

     var population = testJSON.zones[name].population.value; 
     if(name == "default") { 
     population = testJSON.zones[name].population.default.value; 
     } 

     tabledata[i] = {name, population}; 
    } 
    console.log(tabledata); 
    return {zones: tabledata}; 
    }, 

    render: function() { 
    var rows = []; 
    this.state.zones.forEach(function(zone) { 
     rows.push(<tr Population={zone.population} Zone={zone.name} />); 
    }.bind(this)); 
    console.log(rows); 
    return (
     <table> 
      <thead> 
       <tr> 
        <th>Zone</th> 
        <th>Population</th> 
       </tr> 
      </thead> 
      <tbody>{rows}</tbody> 
     </table> 
    ); 
    } 
}); 

यहाँ आप पूर्ण में console.log(tabledata) लाइन के साथ ही पहली वस्तु देख सकते हैं console.log(rows) में

मैं नीचे चित्र की तरह कुछ देखना चाहेंगे: यहाँ कोड है। कृपया ध्यान दें मैं जोन स्तंभ करना चाहते संपादन योग्य इनपुट नहीं होने के लिए है, लेकिन जनसंख्या संपादित किए जा रहे हैं:

Answer 1

<tr Population={zone.population} Zone={zone.name} /> एक वैध की तरह प्रतीत नहीं होता है मेरे लिए घटक प्रतिक्रिया। लोअरकेस <tr> इंगित करता है कि यह एक कस्टम घटक नहीं है, लेकिन एक मानक HTML तालिका पंक्ति का प्रतिनिधित्व करता है। <tr> तत्वों उन्हें अंदर <td> या <th> तत्वों, उदाहरण के लिए आवश्यकता होती है:

var rows = []; 
this.state.zones.forEach(function(zone) { 
    rows.push(
     <tr /> 
     <td><SomePopulationComponent /></td> 
     <td><SomeZoneComponent /></td> 
     </tr> 
    ); 
}.bind(this)); 

आप एक कस्टम तत्व में इस निकाल सकते:

var CustomRow = React.createClass({ 
    render: function() { 
     return (
      <tr> 
       <td>{this.props.Population}</td> 
       <td>{this.props.Zone}</td> 
      </tr> 
     ); 
    } 
}); 

// ... 

var rows = []; 
this.state.zones.forEach(function(zone) { 
    rows.push(<CustomRow Population={zone.population} Zone={zone.name} />); 
}.bind(this)); 

इसके अलावा, मत भूलना एक map अंदर से उत्पन्न तत्वों देने के लिए/foreach एक key विशेषता कार्य करें।

Answer 2

I have made this dynamic data table with dynamic rows and columns editable 


class App extends React.Component { 
constructor(props){ 
     super(props); 
this.state = { 
     data: [ 
     {'id':1,1:'',2:'Class1',3:'Class2',4:'Class3',5:'Class4',6:'Class5',7:'Class6'}, 
     {'id':2,1:'MONDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':3,1:'TUESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':4,1:'WEDNESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':5,1:'THURSDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':6,1:'FRIDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'} 
], 
errorInput:'' 
}; 
    this.submitStepSignupForm = this.submitStepSignupForm.bind(this); 
    this.appendColumn = this.appendColumn.bind(this); 
// this.editColumn = this.editColumn.bind(this); 

render(){ 
     let tableStyle = { 
      align:"center" 
     }; 
     let list = this.state.data.map(p =>{ 
      return (
       <tr className="grey2" key={p.id}> 
        {Object.keys(p).filter(k => k !== 'id').map(k => { 
          return (<td className="grey1" key={p.id+''+k}><div suppressContentEditableWarning="true" contentEditable="true" 
          value={k} onInput={this.editColumn.bind(this,{p},{k})}>{p[k]}</div></td>); 
        })} 
       </tr> 
      ); 
     }); 
     return (
      <fieldset className="step-4"> 
       <div className="heading"> 
        <h3>Tell us about your schedule</h3> 
        <p>Dynamic Data Table by Rohan Arihant </p> 
       </div> 
       <div className="schedule padd-lr"> 
        <table cellSpacing="3" id="mytable" style={tableStyle}> 
          <tbody>{list}</tbody> 
        </table> 

       </div> 


      </fieldset> 
    ); 
} 

}

https://codepen.io/rohanarihant/pen/qmjKpj