Wie innen übergeordnete Funktion verwenden, reagieren die Map-Funktion

Question

ich die folgenden Funktionen auf die folgende Komponente vorbei ...

<Main css={this.props.css} select={this.selectedCSS.bind(this)} save={this.saveCSS.bind(this)} /> 

dann innerhalb der Main Komponente ich diese Funktionen verwenden ...

<h1>Select the stylesheet you wish to clean</h1> 
{ 
    this.props.css.map(function(style){ 

     if (style) { 
      return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>) 
       } 
      }) 
     } 

     </div> 
     <button className="cleanBtn" onClick={this.props.save}>Clean!</button> 

Beachten Sie in meiner map Funktion, ich passiere this.props.select(style). Dies ist eine Funktion des Elternteils, und ich versuche, ihm einen Parameter zu übergeben. Aber wenn ich das tue, erhalte ich einen Fehler ...

Error in event handler for runtime.onMessage: TypeError: Cannot read property 'props' of undefined 

Jede andere Funktion, die ich passiere funktioniert. Ich habe sie bereits getestet. In der Tat funktioniert der Code, das einzige Problem ist, wenn ich versuche, eine Funktion innerhalb map zu übergeben. Was ist der Grund dafür? Wie kann ich es reparieren?

Ich habe versucht, .bind(this) hinzuzufügen, aber es läuft in einer Endlosschleife, wenn ich dies tun.

Answer 1

Das Problem ist, dass Array.prototype.map keinen this Kontext bindet, sofern nicht ausdrücklich gesagt, zu.

this.props.css.map(function(style) { 
    ... 
}, this) // binding this explicitly 

ODER

this.props.css.map((style) => { // arrow function 
    ... 
}) 

ODER

const self = this; 
this.props.css.map((style) => { 
    ... // access 'self.props.select' 
}) 

---

ich ein anderes Problem mit Ihrem Code auch. Innerhalb map tust du das

if (style) { 
    return (
     <div className="inputWrap"> 
      <input type="radio" name="style_name" onClick={this.props.select(style)}/> 
      <span>something</span> 
      <a key={style}>{style}</a> 
     </div> 
    );  
} 

Hier input Element eine Funktion für seine onClick erwartet, aber Sie sind die Bewertung tatsächlich die Funktion von this.props.select(style) aufrufen und den Rückgabewert (wenn überhaupt etwas, das es gibt) zu onClick. Stattdessen müssen Sie dies tun:

this.props.css.map((style) => { 
    if (style) { 
     return (
      <div className="inputWrap"> 
       <input type="radio" name="style_name" onClick={() => this.props.select(style)}/> 
       <span>something</span> 
       <a key={style}>{style}</a> 
      </div> 
     );  
    } 
}) 

Answer 2

In Ihrer Mapping-Funktion zeigt this nicht mehr auf die Reaktionskomponente.

Bind der Kontext manuell dieses Problem zu beheben:

{ 
    this.props.css.map((function(style) { 
     if (style) { 
      return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>) 
     } 
    }).bind(this)) 
} 

---

Alternativ eine ES6 Pfeil Funktion verwenden, die den umgebenden Kontext bewahrt:

{ 
    this.props.css.map(style => { 
     if (style) { 
      return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>) 
     } 
    }) 
} 

Answer 3

Sie erwähnten vorbei ein Parameter beim Aufruf der Funktion eines Elternteils? Als onClick einen Verweis auf eine Funktion will (aber zu erkennen, dass Sie einen Parameter übergeben müssen), können Sie Folgendes versuchen:

onClick={() => { this.props.select(style) }}