webentwicklung-frage-antwort-db.com.de

React.js erstellt eine Tabelle mit einer dynamischen Anzahl von Zeilen mit einer bearbeitbaren Spalte

Ich versuche, eine react.js-Tabelle zu erstellen, die mit einer Flugblattkarte synchronisiert wird. Ich habe diese Daten und kann sie korrekt abrufen, aber ich kann keine korrekte Tabelle erstellen. Ich kann die Header sehen, weil sie fest codiert sind, aber ich kann die Zeilen nicht sehen. Ich habe auch ein Bild, um die Daten an den Punkten console.log () im Code zu erklären. Hier ist der Code:

/* 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>
      );
  }
});

Hier sehen Sie die console.log(tabledata) -Zeile vollständig sowie das erste Objekt in console.log(rows)

Zone name and population

Ich würde gerne so etwas wie das Bild unten sehen. Bitte beachten Sie, dass die Spalte Zone keine bearbeitbare Eingabe sein soll, die Grundgesamtheit jedoch bearbeitbar sein soll:

Desired Table

11
napkinsterror

<tr Population={zone.population} Zone={zone.name} /> scheint mir keine gültige React Komponente. Der Kleinbuchstabe <tr> gibt an, dass dies keine benutzerdefinierte Komponente ist, sondern eine Standard-HTML-Tabellenzeile darstellt. <tr> Elemente erfordern <td> oder <th> Elemente in ihnen, zum Beispiel:

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

Sie können dies in ein benutzerdefiniertes Element extrahieren:

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));

Vergessen Sie auch nicht, Elementen, die aus einer map/foreach -Funktion generiert wurden, ein key -Attribut zuzuweisen.

17
Michelle Tilley

Ich habe diese dynamische Datentabelle mit dynamischen Zeilen und Spalten editierbar gemacht

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

7
RohanArihant