web-dev-qa-db-de.com

ReactJS-Aufruf der übergeordneten Methode

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 Gestalten von Feldern. Und ich habe auch 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 in reaktiver "Welt" gut? Vielen Dank für Ihre Zeit.

javascriptreactjs
94
KaronatoR

Dazu übergeben Sie einen Rückruf als Eigenschaft an das untergeordnete Element des übergeordneten Objekts.

Zum Beispiel:

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 ruft ParentChild mit der Eigenschaft value und onChange auf. Der Child im Gegenzug bindet einen onChange-Handler an ein Standardelement <input /> und übergibt den Wert an den Callback des Parent, falls definiert.

Als Ergebnis wird die Parent-Methode changeHandler aufgerufen, wobei das erste Argument der Zeichenfolgenwert aus dem <input />-Feld in Child ist. Das Ergebnis ist, dass der Status von Parent mit diesem Wert aktualisiert werden kann, wodurch das <span />-Element des übergeordneten Elements mit dem neuen Wert aktualisiert wird, wenn Sie ihn in das Eingabefeld von Child eingeben.

116
Mike Driver

Sie können beliebige übergeordnete Methoden verwenden. Dazu sollten Sie diese Methoden wie ein einfacher Wert von Ihrem Elternteil an Ihr Kind senden. Sie können gleichzeitig viele Methoden des übergeordneten Elements verwenden. Zum Beispiel:

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 wie folgt für das Kind (für alle Aktionen oder für Kindmethoden):

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} />);
    }
});
33
Vitaliy Andrusishyn

2019 Update mit 16+ und ES6

Wenn Sie dies buchen, da React.createClass von der Reaktversion 16 nicht mehr unterstützt wird, bietet Ihnen das neue Javascript ES6 weitere Vorteile.

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 zustandsloses Kind als SE6-Konstante

import React from 'react';

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

}
export default Child;
6
Fangming

Übergeben Sie die Methode von Parent-Komponente als prop an Ihre Child-Komponente .

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>
)
0
Jonca33