Reagieren: Kann Kind Requisiten im Eltern Event-Handler für den Zugriff auf

Question

ich eine Benutzeroberfläche erstellen Reagieren bin mit und ich habe eine übergeordnete Komponente und eine untergeordnete Komponente, etwas in dieser Richtung:

// Child component 
var ListItem = React.createClass({ 
    render: function() { 
    var link_details = (
     <div> 
      Start Date: {this.props.my_data.start_date}<br/> 
      End Date: {this.props.my_data.end_date}<br/> 
     </div> 
    ); 

    return (
     <li> 
      <a onClick={this.props.clickHandler}> 
      { this.props.my_data.name } 
      </a> 
      {link_details} 
     </li> 
    ) 
    } 
}); 

// Parent component 
var Sidebar = React.createClass({ 
    getInitialState: function() { 
    return { 
     my_data: [], 
    }; 
    }, 
    handleListItemClick: function(e){ 
    console.log(e.target); 
    console.log(e.target.props); 
    }, 
    render: function() { 
    var myLinks = this.state.my_data.map(function(mylink) { 
     return (
      <ListItem key={mylink.id} my_data={mylink} clickHandler={this.handleListItemClick} /> 
     ); 
    }.bind(this)); 
    return (
    <div> 
     <ul className="nav nav-sidebar"> 
     { myLinks } 
     </ul> 
    </div>) 
    } 
}); 

möchte ich den Klick Ereignis auf dem Kind, um den Handler des Elterns auszulösen, so dass das Elternteil seinen Zustand basierend auf dem, worauf im Kind geklickt wurde, aktualisieren kann. Während der Code, den ich oben habe, funktioniert, und der Handler des Elternteils aufgerufen wird, kann ich auf keine Requisiten der untergeordneten Komponente zugreifen. Ich bin nicht sicher, ob das von Entwurf ist und ich Daten auf andere Weise vom Kind zum Elternteil weiterleiten sollte, oder wenn ich etwas falsch mache. Ich bin immer noch sehr neu in React, daher ist jeder Rat gefragt. Vielen Dank!

Answer 1

Sie können das nicht tun, aber Sie können

<li> 
    <a onClick={this.props.clickHandler.bind(null,this.props.my_data.name)}> 
    { this.props.my_data.name } 
    </a> 
    {link_details} 
</li> 

oder mit den Pfeilfunktion über Callback-Daten von Kind zu Eltern übergeben, wenn Sie es6

<li> 
    <a onClick={() => this.props.clickHandler(this.props.my_data.name)}> 
    { this.props.my_data.name } 
    </a> 
    {link_details} 
</li> 

bearbeiten

verwenden Warum Null übergeben?

Dinge zu erinnern: Automatische Bindung Methoden zu "this" passiert, wenn Ihre Komponente mounts.

Es gibt zwei Bedingungen

einen Rückruf von übergeordneten Komponente an eine untergeordnete Komponente übergeben 1.Calling

Wenn wir direkt Funktionen übergeben (zB this.clickHandler) zu einem Kind Komponente, ohne sich um die Sorgen Wert von 'dieser', wenn die Funktion tatsächlich aufgerufen wird.

reagieren dann die die Standard-Function.prototype.bind Methode mit einer eigenen Funktion ersetzt, Ihnen zu helfen zu verhindern, Dummheiten zu tun (wie der Versuch, die bereits gebundenen Wert von 'dieser ‚zu ändern), so dass Sie stattdessen passieren müssen‘ null 'zu sagen "Ich verstehe das wird nur die Argumente ändern".

2.eine Funktion definiert, innerhalb derselben Komponente

Reagieren Beim Aufruf dieser Funktion für nicht tun Anrufe innerhalb derselben Komponente

Regeln für

Bindung Wenn Sie .bind auf das erste Argument gesetzt werden soll durch den Aufruf eine Funktion ...

über Requisiten übergeben, übergeben Null als erstes Argument z

this.props.funcName.bind(null, "args") 

von 'this' übernommen, übergeben 'this' als erstes Argument z.

this.funcName.bind(this, "args") 

Answer 2

Sie können dies tun:

var ListItem = React.createClass({ 
    clickItem: function (e) { 
     this.props.clickHandler(e, this.props.my_data); // now you can pass any data to parent 
    }, 
    render: function() { 
    var link_details = (
     <div> 
      Start Date: {this.props.my_data.start_date}<br/> 
      End Date: {this.props.my_data.end_date}<br/> 
     </div> 
    ); 

    return (
     <li> 
      <a onClick={this.clickItem}> 
      { this.props.my_data.name } 
      </a> 
      {link_details} 
     </li> 
    ) 
    } 
}); 

Answer 3

Ich habe einen Blick auf die Antwort auf Pass props to parent component in React.js und kam mit den folgenden:

// Parent component 
var Sidebar = React.createClass({ 
    getInitialState: function() { 
    return { 
     my_data: [], 
    }; 
    }, 
    handleListItemClick: function(data_passed, e){ 
    console.log(data_passed); 
    }, 
    render: function() { 
    var myLinks = this.state.my_data.map(function(mylink) { 
     return (
      <ListItem key={mylink.id} my_data={mylink} clickHandler={this.handleListItemClick.bind(null, mylink.id)} /> 
     ); 
    }.bind(this)); 
    return (
    <div> 
     <ul className="nav nav-sidebar"> 
     { myLinks } 
     </ul> 
    </div>) 
    } 
}); 

Dies scheint ich arbeits würde interessieren andere Lösungen zu sehen und welche ist die "beste" und warum.