ReactJS ruft die übergeordnete Methode auf

139

Ich mache meinen ersten Schritt in ReactJS und versuche, die Kommunikation zwischen Eltern und Kindern zu verstehen. Ich mache Form, also habe ich die Komponente zum Stylen von Feldern. Außerdem habe ich eine übergeordnete Komponente, die ein Feld enthält und es überprüft. Beispiel:

var LoginField = React.createClass({
    render: function() {
        return (
            <MyField icon="user_icon" placeholder="Nickname" />
        );
    },
    check: function () {
        console.log ("aakmslkanslkc");
    }
})

var MyField = React.createClass({
    render: function() {
...
    },
    handleChange: function(event) {
//call parent!
    }
})

Gibt es eine Möglichkeit, dies zu tun? Und ist meine Logik gut in der Reaktion auf "Welt"? Vielen Dank für Ihre Zeit.

KaronatoR
quelle

Antworten:

153

Dazu übergeben Sie einen Rückruf als Eigenschaft vom Elternteil an das Kind.

Beispielsweise:

var Parent = React.createClass({

    getInitialState: function() {
        return {
            value: 'foo'
        }
    },

    changeHandler: function(value) {
        this.setState({
            value: value
        });
    },

    render: function() {
        return (
            <div>
                <Child value={this.state.value} onChange={this.changeHandler} />
                <span>{this.state.value}</span>
            </div>
        );
    }
});

var Child = React.createClass({
    propTypes: {
        value:      React.PropTypes.string,
        onChange:   React.PropTypes.func
    },
    getDefaultProps: function() {
        return {
            value: ''
        };
    },
    changeHandler: function(e) {
        if (typeof this.props.onChange === 'function') {
            this.props.onChange(e.target.value);
        }
    },
    render: function() {
        return (
            <input type="text" value={this.props.value} onChange={this.changeHandler} />
        );
    }
});

Im obigen Beispiel werden ParentAufrufe Childmit der Eigenschaft valueund onChange. Die ChildRückgabe bindet einen onChangeHandler an ein Standardelement <input />und übergibt den Wert an den ParentRückruf des Benutzers, falls dieser definiert ist.

Infolgedessen wird die Methode Parent' changeHandleraufgerufen, wobei das erste Argument der Zeichenfolgenwert aus dem <input />Feld im Feld ist Child. Das Ergebnis ist, dass der ParentStatus des 'mit diesem Wert aktualisiert werden kann, wodurch das übergeordnete <span />Element mit dem neuen Wert aktualisiert wird, während Sie es in das ChildEingabefeld des ' eingeben.

Mike Fahrer
quelle
15
Ich denke, Sie müssen die übergeordnete Funktion binden, bevor Sie sie an das Kind weitergeben:<Child value={this.state.value} onChange={this.changeHandler.bind(this)} />
o01
19
@ o01 nein, tust du nicht, weil ich verwende, React.createClasswelches automatisch alle Komponentenmethoden bindet. Wenn ich React es6-Klassen verwenden würde, müssten Sie es binden (es sei denn, Sie würden automatisch im Konstruktor binden, was heutzutage viele Leute tun, um dies zu umgehen)
Mike Driver
1
@ MikeDriver Ich verstehe. Ich wusste nicht, dass dies auf Fälle beschränkt ist, in denen ECMAScript 6-Klassen verwendet werden (was ich bin). Es war auch nicht bekannt, dass das React-Team die automatische Bindung im Konstruktor empfiehlt .
o01
1
Ich weiß nicht, ob sie es empfehlen, aber es scheint eine ziemlich häufige Sache zu sein, die ich sehe. Für mich ist es sinnvoller, die Bindung in den Render-Thread einzufügen. Der Grund dafür ist, dass .bindeine neue Funktion zurückgegeben wird. Im Grunde genommen erstellen Sie also jedes Mal eine neue Funktion, wenn Sie rendern. Dies ist wahrscheinlich in Ordnung, aber wenn Sie im Konstruktor binden, tun Sie dies nur einmal pro Komponentenmethode bei der Instanziierung und nicht bei jedem Rendern. Es ist ein Trottel ... aber technisch besser, denke ich!
Mike Driver
1
@ DavidLy-Gagnon gut in dem Beispiel könnte es undefiniert sein, da ich isRequired auf dem propType nicht angehängt habe. Aber ja, Sie können das entweder tun oder einfach überprüfen, ob es definiert wurde oder nicht.
Mike Driver
51

Sie können beliebige übergeordnete Methoden verwenden. Dazu sollten Sie diese Methoden wie einen einfachen Wert von Ihrem Elternteil an Ihr Kind senden. Und Sie können viele Methoden des übergeordneten Elements gleichzeitig verwenden. Beispielsweise:

var Parent = React.createClass({
    someMethod: function(value) {
        console.log("value from child", value)
    },
    someMethod2: function(value) {
        console.log("second method used", value)
    },
    render: function() {
      return (<Child someMethod={this.someMethod} someMethod2={this.someMethod2} />);
    }
});

Und verwenden Sie es so für das Kind (für alle Aktionen oder für alle untergeordneten Methoden):

var Child = React.createClass({
    getInitialState: function() {
      return {
        value: 'bar'
      }
    },
    render: function() {
      return (<input type="text" value={this.state.value} onClick={this.props.someMethod} onChange={this.props.someMethod2} />);
    }
});
Vitaliy Andrusishyn
quelle
1
Geniale Antwort. Keine Ahnung, dass Sie Methoden als solche Requisiten weitergeben könnten, ich habe Refs verwendet, um dies zu erreichen!
Paul Redmond
1
Ich habe den Rückruf vom Kind angerufen bekommen, aber dort this.propsim Rückruf wird undefined.
Khateeb
Sie sollten diesen Rückruf vom Elternteil an das Kind senden (versuchen Sie, diesen Rückruf mit zu binden this)
Vitaliy Andrusishyn
Hallo Valentin Petkov. Herzlich willkommen!
Vitaliy Andrusishyn
39

2019 Update mit React 16+ und ES6

Wenn Sie dies veröffentlichen, da React.createClasses in React Version 16 veraltet ist und das neue Javascript ES6 Ihnen weitere Vorteile bietet.

Elternteil

import React, {Component} from 'react';
import Child from './Child';
  
export default class Parent extends Component {

  es6Function = (value) => {
    console.log(value)
  }

  simplifiedFunction (value) {
    console.log(value)
  }

  render () {
  return (
    <div>
    <Child
          es6Function = {this.es6Function}
          simplifiedFunction = {this.simplifiedFunction} 
        />
    </div>
    )
  }

}

Kind

import React, {Component} from 'react';

export default class Child extends Component {

  render () {
  return (
    <div>
    <h1 onClick= { () =>
            this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
          }
        > Something</h1>
    </div>
    )
  }
}

Vereinfachtes staatenloses Kind als ES6-Konstante

import React from 'react';

const Child = () => {
  return (
    <div>
    <h1 onClick= { () =>
        this.props.es6Function(<SomethingThatYouWantToPassIn>)
      }
      > Something</h1>
    </div>
  )

}
export default Child;
Fangming
quelle
4 statt 2 Leerzeichen in ES6 JS zu sehen, macht mich traurig: '(
Bataleon
3

Übergeben Sie die Methode von der ParentKomponente als propan Ihre ChildKomponente. dh:

export default class Parent extends Component {
  state = {
    word: ''
  }

  handleCall = () => {
    this.setState({ word: 'bar' })
  }

  render() {
    const { word } = this.state
    return <Child handler={this.handleCall} word={word} />
  }
}

const Child = ({ handler, word }) => (
<span onClick={handler}>Foo{word}</span>
)
Jonca33
quelle
2

Verwenden der Funktion || zustandslose Komponente

Übergeordnete Komponente

 import React from "react";
 import ChildComponent from "./childComponent";

 export default function Parent(){

 const handleParentFun = (value) =>{
   console.log("Call to Parent Component!",value);
 }
 return (<>
           This is Parent Component
           <ChildComponent 
             handleParentFun={(value)=>{
               console.log("your value -->",value);
               handleParentFun(value);
             }}
           />
        </>);
}

Untergeordnete Komponente

import React from "react";


export default function ChildComponent(props){
  return(
         <> This is Child Component 
          <button onClick={props.handleParentFun("YoureValue")}>
            Call to Parent Component Function
          </button>
         </>
        );
}
Omkesh Sajjanwar
quelle
1
Um Ihrer Antwort einen Mehrwert zu verleihen, sollten Sie eine kurze Erklärung hinzufügen, was dieser Code bewirkt.
Cray
Wenn Sie in der untergeordneten Komponente auf die Schaltfläche klicken, wird die Funktion "Übergeordnete Komponente aufrufen" über Requisiten aufgerufen.
Omkesh Sajjanwar
1
Was ist, wenn die Funktion Parameter hat? Wie übergeben Sie die Parameter an das übergeordnete Element?
alex351
Ja! @ alex351 wir können dieses Szenario behandeln. In der untergeordneten Komponente -> onClick = {props.handleParentFun ("YoureValue")} In der übergeordneten Komponente -> handleParentFun = {(Wert) => {console.log (); handleChildFun (Wert); }}
Omkesh Sajjanwar
0

Reagiere 16+

Untergeordnete Komponente

import React from 'react'

class ChildComponent extends React.Component
{
    constructor(props){
        super(props);       
    }

    render()
    {
        return <div>
            <button onClick={()=>this.props.greetChild('child')}>Call parent Component</button>
        </div>
    }
}

export default ChildComponent;

Übergeordnete Komponente

import React from "react";
import ChildComponent from "./childComponent";

class MasterComponent extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state={
            master:'master',
            message:''
        }
        this.greetHandler=this.greetHandler.bind(this);
    }

    greetHandler(childName){
        if(typeof(childName)=='object')
        {
            this.setState({            
                message:`this is ${this.state.master}`
            });
        }
        else
        {
            this.setState({            
                message:`this is ${childName}`
            });
        }

    }

    render()
    {
        return <div>
           <p> {this.state.message}</p>
            <button onClick={this.greetHandler}>Click Me</button>
            <ChildComponent greetChild={this.greetHandler}></ChildComponent>
        </div>
    }
}
export default  MasterComponent;
Sandeep Shekhawat
quelle