Wie entfernen Sie eine Eltern-Tabellenzeile, wenn die Schaltfläche "Löschen" in "React JS" geklickt wird?

Question

Ich rendere Tabellendaten in React JS und habe Probleme beim Abrufen meiner Tabellenzeile beim Klicken auf eine untergeordnete Schaltfläche "Löschen". Meine aktuelle Prozedur und Funktionen machen sieht wie folgt aus:

... 
changeHandler: function(e) { 
... 
}, 

deleteHandler: function(e) { 
    e.currentTarget.closest("tr").style.visibility = "hidden"; 
}, 

render: function() { 
    return (
    <div> 
     <div class="container"> 
      <select onChange={ this.changeHandler.bind(this) }> 
      <option></option> 
      ... 
      </select> 
      <table> 
      <thead> 
       <tr> 
       ... 
       </tr> 
      </thead> 
      <tbody> 
       {data.map(function(row, j) { 
        return <tr key={j}> 
        <td>{row.text}</td> 
        <td><a href="" onClick={this.deleteHandler.bind(this, j)}>delete</a></td> 
        </tr>        
         } 
        )} 
      </tbody> 
     </table>   
    </div> 
    </div> 
    ); 
} 
... 

Wenn ich auf dem Lösch Anker klicken, bekomme ich diesen Fehler in der Konsole:

Uncaught TypeError: Cannot read property 'bind' of undefined 

Ich verstehe nicht, warum meine löschen Handler isn Ich werde nicht erkannt und gebunden, wenn der changeHandler, den ich benutze, ist. Könnte mir bitte jemand sagen, wie man dieses Ereignis bekommt, um den Handler zu treffen und wie man den Elternteil tr anvisiert, um ihn versteckt zu halten?

Answer 1

Nach der Korrektur im Tippfehler oben, sehe ich, dass hier nicht der Fehler war. Schau dir die folgende Geige an, um sie in Aktion zu sehen. Wenn Sie die Zeile ausblenden, müssen Stiländerungen vorgenommen werden.

https://jsfiddle.net/vgo52rey/

Das Problem ist, mit der Bindung von 'this' in der Filterfunktion in der Geige. Entwerfe das in eine andere Methode, so dass du den Verweis darauf in einer anderen Variablen speichern kannst, dann kannst du den Verweis auf this.delete oder this.deleteHandler behalten.

delete: function(e) { 
    e.currentTarget.closest("tr").style.visibility = "hidden"; 
}, 

renderRows: function() { 
    var shouldIRender =(row) => (this.state.filter === row.status || this.state.filter === ""); 
    var self = this 
    return requests.filter(shouldIRender).map(function(row, j) { 
        return <tr key={j}> 
        <td style={tdStyle}>{row.title}</td> 
        <td style={tdStyle}>{row.status}</td> 
        <td style={tdStyle}>{row.created_at}</td> 
        <td style={tdStyle}>{row.updated_at}</td> 
        <td style={tdStyle}><a href="#" onClick={self.delete}>delete</a></td> 
        </tr>        
         } 
        ) 
}, 

in Ihrem Render-Methode jetzt können Sie ihn nur renderRows Methode Rückgabewert liefern:

   <tbody> 
       {this.renderRows()} 
      </tbody>