Non c'è un modo semplice per passare un figlio propsal suo genitore usando eventi, in React.js?

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

So che puoi usare componenti controllati per passare il valore di un input ma sarebbe bello passare l'intero kit n 'kaboodle. A volte il componente figlio contiene una serie di informazioni che preferiresti non dover cercare.

Forse c'è un modo per associare il componente all'evento?

AGGIORNAMENTO - 9/1/2015

Dopo aver usato React per oltre un anno, e spronato dalla risposta di Sebastien Lorber, ho concluso che passare componenti figlio come argomenti a funzioni nei genitori non è in realtà il modo React, né è mai stata una buona idea. Ho cambiato la risposta.

Modifica : vedere gli esempi di fine per gli esempi aggiornati di ES6.

Questa risposta gestisce semplicemente il caso della relazione diretta genitore-figlio. Quando genitori e figli hanno potenzialmente molti intermediari, controlla questa risposta .

Altre soluzioni mancano il punto

Mentre funzionano ancora bene, ad altre risposte manca qualcosa di molto importante.

Non c'è un modo semplice per passare gli oggetti di scena di un bambino al suo genitore usando eventi, in React.js?

Il genitore ha già quel figlio prop! : se il bambino ha un sostegno, è perché il suo genitore ha fornito quel sostegno al bambino! Perché vuoi che il bambino riporti l'elica al genitore, mentre ovviamente il genitore ha già quell'elica?

Migliore attuazione

Bambina : in realtà non deve essere più complicato di così.

var Child = React.createClass({
  render: function () {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

Genitore con figlio singolo : utilizzando il valore che passa al figlio

var Parent = React.createClass({
  getInitialState: function() {
     return {childText: "Click me! (parent prop)"};
  },
  render: function () {
    return (
      <Child onClick={this.handleChildClick} text={this.state.childText}/>
    );
  },
  handleChildClick: function(event) {
     // You can access the prop you pass to the children 
     // because you already have it! 
     // Here you have it in state but it could also be
     //  in props, coming from another parent.
     alert("The Child button text is: " + this.state.childText);
     // You can also access the target of the click here 
     // if you want to do some magic stuff
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

Genitore con un elenco di figli : hai ancora tutto il necessario sul genitore e non devi renderlo più complicato.

var Parent = React.createClass({
  getInitialState: function() {
     return {childrenData: [
         {childText: "Click me 1!", childNumber: 1},
         {childText: "Click me 2!", childNumber: 2}
     ]};
  },
  render: function () {
    var children = this.state.childrenData.map(function(childData,childIndex) {
        return <Child onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
    }.bind(this));
    return <div>{children}</div>;
  },

  handleChildClick: function(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

È anche possibile utilizzare this.handleChildClick.bind(null,childIndex)e quindi utilizzarethis.state.childrenData[childIndex]

Nota che stiamo vincolando con un nullcontesto perché altrimenti React emette un avviso relativo al suo sistema di auto-associazione . L'uso di null significa che non si desidera modificare il contesto della funzione. Guarda anche .

Informazioni sull'incapsulamento e l'accoppiamento in altre risposte

Questa è per me una cattiva idea in termini di accoppiamento e incapsulamento:

var Parent = React.createClass({
  handleClick: function(childComponent) {
     // using childComponent.props
     // using childComponent.refs.button
     // or anything else using childComponent
  },
  render: function() {
    <Child onClick={this.handleClick} />
  }
});

Uso degli oggetti di scena : come ho spiegato sopra, hai già gli oggetti di scena nel genitore, quindi è inutile passare l'intero componente figlio per accedere agli oggetti di scena.

Utilizzo di ref : hai già il target dei clic nell'evento, e nella maggior parte dei casi questo è sufficiente. Inoltre, avresti potuto usare un ref direttamente sul bambino:

<Child ref="theChild" .../>

E accedi al nodo DOM nel genitore con

React.findDOMNode(this.refs.theChild)

Per i casi più avanzati in cui si desidera accedere a più riferimenti del figlio nel genitore, il figlio potrebbe passare tutti i nodi dom direttamente nel callback.

Il componente ha un'interfaccia (oggetti di scena) e il genitore non dovrebbe assumere nulla sul funzionamento interno del figlio, inclusa la sua struttura DOM interna o per quali nodi DOM dichiara i riferimenti. Un genitore che utilizza un riferimento di un bambino significa che si accoppiano strettamente i 2 componenti.

Per illustrare il problema, prenderò questa citazione sul Shadow DOM , che viene utilizzato all'interno dei browser per rendere elementi come cursori, barre di scorrimento, lettori video ...:

Hanno creato un confine tra ciò che tu, lo sviluppatore Web è in grado di raggiungere e i dettagli dell'implementazione considerati, quindi inaccessibili per te. Tuttavia, il browser può attraversare questo confine a piacimento. Con questo limite in atto, sono stati in grado di costruire tutti gli elementi HTML usando le stesse buone tecnologie Web, al di fuori dei div e degli intervalli proprio come faresti tu.

Il problema è che se si lasciano filtrare i dettagli dell'implementazione figlio nel genitore, si rende molto difficile il refactoring del figlio senza influire sul genitore. Ciò significa che come autore di librerie (o come editor di browser con Shadow DOM) questo è molto pericoloso perché si consente al client di accedere troppo, rendendo molto difficile l'aggiornamento del codice senza interrompere la retrocompatibilità.

Se Chrome avesse implementato la sua barra di scorrimento consentendo al client di accedere ai nodi dom interni di quella barra di scorrimento, ciò significa che il client potrebbe avere la possibilità di interrompere semplicemente quella barra di scorrimento e che le app si interromperebbero più facilmente quando Chrome eseguisse l'aggiornamento automatico dopo il refactoring del barra di scorrimento ... Invece, danno accesso solo ad alcune cose sicure come la personalizzazione di alcune parti della barra di scorrimento con CSS.

Di usare qualcos'altro

Passare l'intero componente nel callback è pericoloso e può portare gli sviluppatori alle prime armi a fare cose molto strane come chiamare childComponent.setState(...)o childComponent.forceUpdate(), o assegnare loro nuove variabili, all'interno del genitore, rendendo l'intera app molto più difficile da ragionare.

Modifica: esempi ES6

Poiché molte persone ora usano ES6, ecco gli stessi esempi per la sintassi ES6

Il bambino può essere molto semplice:

const Child = ({
  onClick, 
  text
}) => (
  <button onClick={onClick}>
    {text}
  </button>
)

Il genitore può essere una classe (e alla fine può gestire lo stato stesso, ma lo sto passando come oggetti di scena qui:

class Parent1 extends React.Component {
  handleChildClick(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
  render() {
    return (
      <div>
        {this.props.childrenData.map(child => (
          <Child
            key={child.childNumber}
            text={child.childText} 
            onClick={e => this.handleChildClick(child,e)}
          />
        ))}
      </div>
    );
  }
}

Ma può anche essere semplificato se non è necessario gestire lo stato:

const Parent2 = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
                    alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)

JsFiddle

AVVISO PERF (si applicano a ES5 / ES6): se si sta utilizzando PureComponento shouldComponentUpdate, le implementazioni di cui sopra non saranno ottimizzate per impostazione predefinita perché utilizzano onClick={e => doSomething()}o si associano direttamente durante la fase di rendering, poiché creerà una nuova funzione ogni volta che viene eseguito il rendering del genitore. Se si tratta di un collo di bottiglia perfetto nella tua app, puoi trasferire i dati ai bambini e reintegrarli all'interno di un callback "stabile" (impostato sulla classe genitore e associato al thiscostruttore della classe) in modo che l' PureComponentottimizzazione possa iniziare, oppure tu può implementare il tuoshouldComponentUpdate e ignorare il callback nel controllo comparativo degli oggetti di scena.

Puoi anche utilizzare la libreria Ricomponi , che fornisce componenti di ordine superiore per ottenere ottimizzazioni ottimizzate:

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

In questo caso è possibile ottimizzare il componente figlio utilizzando:

const OptimizedChild = onlyUpdateForKeys(['text'])(Child)

Aggiornamento (01/09/15): l'OP ha fatto di questa domanda un obiettivo in movimento. È stato nuovamente aggiornato. Quindi, mi sento responsabile di aggiornare la mia risposta.

Innanzitutto, una risposta al tuo esempio fornito:

Sì, questo è possibile.

È possibile risolvere questo problema aggiornando Child onClickper essere this.props.onClick.bind(null, this):

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick.bind(null, this)}>Click me</a>;
  }
});

Il gestore eventi nel tuo genitore può quindi accedere al componente e all'evento in questo modo:

  onClick: function (component, event) {
    // console.log(component, event);
  },

Istantanea di JSBin

Ma la domanda stessa è fuorviante

Il genitore conosce già il bambino props.

Questo non è chiaro nell'esempio fornito perché in realtà non vengono forniti oggetti di scena. Questo codice di esempio potrebbe supportare meglio la domanda che viene posta:

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick}> {this.props.text} </a>;
  }
});

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (event) {
    // event.component.props ?why is this not available? 
  },
  render: function() {
    return <Child onClick={this.onClick} text={this.state.text} />;
  }
});

In questo esempio diventa molto più chiaro che sai già quali sono gli oggetti di scena di Child.

Istantanea di JSBin

Se si tratta davvero di usare oggetti di scena di un bambino ...

Se si tratta davvero di usare gli oggetti di scena di un bambino, puoi evitare qualsiasi collegamento con Child.

JSX ha un'API di attributi di diffusione che uso spesso su componenti come Child. Prende tutto propse li applica a un componente. Il bambino sarebbe simile a questo:

var Child = React.createClass({
  render: function () {
    return <a {...this.props}> {this.props.text} </a>;
  }
});

Consentire all'utente di utilizzare i valori direttamente in Parent:

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
  }
});

Istantanea di JSBin

E non è richiesta alcuna configurazione aggiuntiva quando si collegano componenti secondari aggiuntivi

var Parent = React.createClass({
  getInitialState: function () {
    return {
      text: "Click here",
      text2: "No, Click here",
    };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <div>
      <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
      <Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
    </div>;
  }
});

Istantanea di JSBin

Ma sospetto che non sia il tuo caso d'uso reale. Quindi scaviamo ulteriormente ...

Un solido esempio pratico

La natura generica dell'esempio fornito è difficile da parlare. Ho creato un componente che dimostra un uso pratico della domanda precedente, implementato in modo molto reattivo :

Esempio di funzionamento di DTServiceCalculator Repos.
DTServiceCalculator

Questo componente è un semplice calcolatore di servizio. Gli fornisci un elenco di servizi (con nomi e prezzi) e calcolerà un totale dei prezzi selezionati.

I bambini sono beatamente ignoranti

ServiceItemè il componente figlio in questo esempio. Non ha molte opinioni sul mondo esterno. Si richiede un paio di oggetti di scena , uno dei quali è una funzione da chiamare quando si fa clic.

<div onClick={this.props.handleClick.bind(this.props.index)} />

Non fa altro che chiamare il handleClickcallback fornito con la index[ fonte ] fornita .

I genitori sono bambini

DTServicesCalculatorè il componente principale è questo esempio. È anche un bambino. Guardiamo.

DTServiceCalculatorcrea un elenco di componenti figlio ServiceIteme fornisce loro oggetti di scena [ fonte ]. È il componente padre di ServiceItemma è il componente figlio del componente che gli passa l'elenco. Non possiede i dati. Quindi delega nuovamente la gestione del componente all'origine del componente principale

<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />

handleServiceItemacquisisce l'indice, passato dal figlio e lo fornisce al suo genitore [ fonte ]

handleServiceClick (index) {
  this.props.onSelect(index);
}

I proprietari sanno tutto

Il concetto di "proprietà" è importante in React. Consiglio di leggere di più qui .

Nell'esempio che ho mostrato, continuo a delegare la gestione di un evento nella struttura dei componenti fino a quando non arriviamo al componente proprietario dello stato.

Quando finalmente ci arriviamo, gestiamo la selezione / deselezione dello stato in questo modo [ fonte ]:

handleSelect (index) {
  let services = […this.state.services];
  services[index].chosen = (services[index].chosen) ? false : true;
  this.setState({ services: services });
}

Conclusione

Cerca di mantenere i componenti più esterni più opachi possibile. Sforzati di assicurarti che abbiano pochissime preferenze su come un componente genitore potrebbe scegliere di implementarle.

Tieni presente chi possiede i dati che stai manipolando. Nella maggior parte dei casi, sarà necessario delegare l'evento che gestisce l'albero al componente che possiede tale stato.

A parte: il modello Flux è un buon modo per ridurre questo tipo di collegamento necessario nelle app.

Sembra che ci sia una risposta semplice. Considera questo:

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick.bind(null, this)}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(component, event) {
    component.props // #=> {Object...}
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

La chiave sta chiamando bind(null, this)l' this.props.onClickevento, passato dal genitore. Ora, la funzione onClick accetta argomenti component, ANDevent . Penso che sia il migliore di tutti i mondi.

AGGIORNAMENTO: 9/1/2015

Questa è stata una cattiva idea: lasciare che i dettagli sull'implementazione del bambino entrino nel genitore non è mai stato un buon percorso. Vedi la risposta di Sebastien Lorber.

La domanda è come passare l'argomento dal componente figlio al componente padre. Questo esempio è facile da usare e testato:

//Child component
class Child extends React.Component {
    render() {
        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div>
        )
    }
}

//Parent component
class Parent extends React.Component {
    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
    }

    handleToUpdate(someArg){
        alert('We pass argument from Child to Parent: \n' + someArg);
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;
        return (<div>
          <Child handleToUpdate = {handleToUpdate.bind(this)} />
        </div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <Parent />,
        document.querySelector("#demo")
    );
}

Guarda JSFIDDLE

Fondamentalmente usi gli oggetti di scena per inviare informazioni da e verso Child e Parent.

Aggiungendo a tutte le meravigliose risposte, lasciatemi fare un semplice esempio che spiega il passaggio di valori dal componente figlio a quello principale in React

App.js

class App extends React.Component {
      constructor(){
            super();
            this.handleFilterUpdate = this.handleFilterUpdate.bind(this);
            this.state={name:'igi'}
      }
      handleFilterUpdate(filterValue) {
            this.setState({
                  name: filterValue
            });
      }
   render() {
      return (
        <div>
            <Header change={this.handleFilterUpdate} name={this.state.name} />
            <p>{this.state.name}</p>
        </div>
      );
   }
}

Header.js

class Header extends React.Component {
      constructor(){
            super();
            this.state={
                  names: 'jessy'
            }
      }
      Change(event) {

      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

   render() {
      return (
       <button onClick={this.Change.bind(this)}>click</button>

      );
   }
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Ecco fatto, ora puoi passare valori dal tuo client al server.

Dai un'occhiata alla funzione Cambia in Header.js

Change(event) {
      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

Questo è il modo in cui spingi i valori negli oggetti di scena dal client al server

Ecco una semplice implementazione ES6 in 3 passaggi che utilizza l'associazione di funzioni nel costruttore principale. Questo è il primo modo raccomandato dal tutorial di reazione ufficiale (c'è anche la sintassi dei campi di classe pubblica non trattata qui). Puoi trovare tutte queste informazioni qui https://reactjs.org/docs/handling-events.html

Associare le funzioni genitore in modo che i bambini possano chiamarle (e passare i dati al genitore!: D)

1. Assicurarsi che nel costruttore principale si associ la funzione creata nel padre
2. Passa la funzione associata al bambino come prop (No lambda perché stiamo passando un riferimento alla funzione)
3. Chiama la funzione associata da un evento figlio (Lambda! Chiamiamo la funzione quando viene generato l'evento. In caso contrario, la funzione verrà automaticamente eseguita al caricamento e non verrà attivata sull'evento.)

Funzione genitore

handleFilterApply(filterVals){} 

Costruttore principale

this.handleFilterApply = this.handleFilterApply.bind(this);

Prop passato al bambino

onApplyClick = {this.handleFilterApply}

Chiamata evento bambino

onClick = {() => {props.onApplyClick(filterVals)}

Questo è un esempio senza usare l'evento onClick. Ho semplicemente passato una funzione di richiamata al bambino per mezzo di oggetti di scena. Con tale richiamata, anche la chiamata figlio restituisce i dati. Sono stato ispirato dagli esempi nei documenti .

Piccolo esempio (questo è in un file tsx, quindi oggetti di scena e stati devono essere dichiarati completamente, ho eliminato un po 'di logica dai componenti, quindi è meno codice).

* Aggiornamento: è importante associare questo al callback, altrimenti il ​​callback ha lo scopo del figlio e non del genitore. Unico problema: è il "vecchio" genitore ...

SintomoChoser è il genitore:

interface SymptomChooserState {
  // true when a symptom was pressed can now add more detail
  isInDetailMode: boolean
  // since when user has this symptoms
  sinceDate: Date,
}

class SymptomChooser extends Component<{}, SymptomChooserState> {

  state = {
    isInDetailMode: false,
    sinceDate: new Date()
  }

  helloParent(symptom: Symptom) {
    console.log("This is parent of: ", symptom.props.name);
    // TODO enable detail mode
  }

  render() {
    return (
      <View>
        <Symptom name='Fieber' callback={this.helloParent.bind(this)} />
      </View>
    );
  }
}

Il sintomo è il figlio (negli oggetti di scena del figlio ho dichiarato la funzione di richiamata, nella funzione selezionata Sintomo si chiama la richiamata):

interface SymptomProps {
  // name of the symptom
  name: string,
  // callback to notify SymptomChooser about selected Symptom.
  callback: (symptom: Symptom) => void
}

class Symptom extends Component<SymptomProps, SymptomState>{

  state = {
    isSelected: false,
    severity: 0
  }

  selectedSymptom() {
    this.setState({ isSelected: true });
    this.props.callback(this);
  }

  render() {
    return (
      // symptom is not selected
      <Button
        style={[AppStyle.button]}
        onPress={this.selectedSymptom.bind(this)}>
        <Text style={[AppStyle.textButton]}>{this.props.name}</Text>
      </Button>
    );
  }
}