comment ajouter une ligne à une table à l'aide de ReactJS sur le bouton cliquez sur

J'ai un tableau et je veux ajouter une ligne à quand AJOUTER le bouton est cliqué. Comment puis-je le faire à l'aide de ReactJS au lieu de JavaScript simple?

code:

var RecordsComponent = React.createClass({
    render : function() {
        return (
            <div>
                <table>
                    <tr>
                        <td>row 1</td>
                    </tr>
                    <tr>
                        <td>row 2</td>
                    </tr>
                    <tr>
                        <td}>row 3</td>
                    </tr>
                </table>
                <button id="addBtn" onClick={addRow}>ADD</button>
            </div>
        );
    },
    addRow : function() {
        //how to add row using ReactJS?
    },
});

React.render(<RecordsComponent/>, document.getElementById('display'))
Les données pour les lignes supplémentaires (ou toutes les lignes, en fonction de ce que vous essayez de le faire) enregistré dans votre state, alors conditionnelle de rendre les lignes supplémentaires dans votre render fonction avec quelque chose comme this.state.rows.map().
pouvez-vous s'il vous plaît écrire un exemple de code?

OriginalL'auteur Agha | 2017-09-18

  1. 9

    Vous avez besoin pour faire de votre Réagissent composant ont un état les composants et les rendre en conséquence basés sur les données recueillies. Oubliez les vieux "DOM changement de paradigme où vous jouez directement avec des éléments HTML.

    Non testé mais l'idée à travers: 

    var RecordsComponent = React.createClass({
    getInitialState: {
        return {
          rows: ['row 1', 'row 2', 'row 3']
        }
    },
    render : function() {
        return (
            <div>
                <table>
                    {rows.map((r) => (
                      <tr>
                          <td>{r}</td>
                      </tr>
                    ))}
                </table>
                <button id="addBtn" onClick={addRow}>ADD</button>
            </div>
        );
    },
    addRow : function() {
        var rows = this.state.rows
        rows.push('new row')
        this.setState({rows: rows})
    },
});

React.render(<RecordsComponent/>, document.getElementById('display'))

    Si vous êtes juste de commencer à apprendre à Réagir avec votre propre test apps je vous conseille d'utiliser la version la plus récente de Réagir, de même que, parmi beaucoup d'autres choses, la Réagir ES6 définitions de classe.

    OriginalL'auteur jlaitio

  2. 1

    Essayer quelque chose comme cela

       var RecordsComponent = React.createClass({
getInitialState: function () {
return {
tablerows:[
{fname:"Tom",lname:"Moody",age:23}
]
};
},    
addRow: function() {
//add new data from here    
var newdata = {fname:"Tom",lname:"Moody",age:23}    
//take the existing state and concat the new data and set the state again    
this.setState({ tablerows: this.state.tablerows.concat(newdata ) });    
},    
rows:function(){
return this.state.tablerows.map(function(row,i){
return   (<tr key={i}>
<td>{row.fname}</td>
<td>{row.lname}</td> 
<td>{row.age}</td>
</tr>);
});
},
render : function() {
return (
<div>
<table>
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr>
<td}>row 3</td>
</tr>
{this.rows()}
</table>
<button id="addBtn" onClick={this.addRow}>ADD</button>
</div>
);
}
});
React.render(<RecordsComponent/>, document.getElementById('display'))

    OriginalL'auteur TRomesh