Was ist der richtige Weg, um den Status eines Formularelements an Geschwister- / übergeordnete Elemente zu übergeben?

• Angenommen, ich habe eine React-Klasse P, die zwei untergeordnete Klassen, C1 und C2, rendert.
• C1 enthält ein Eingabefeld. Ich werde dieses Eingabefeld als Foo bezeichnen.
• Mein Ziel ist es, C2 auf Änderungen in Foo reagieren zu lassen.

Ich habe zwei Lösungen gefunden, aber keine davon fühlt sich ganz richtig an.

Erste Lösung:

1. Weisen Sie P einen Zustand zu state.input.
2. Erstellen Sie eine onChangeFunktion in P, die ein Ereignis aufnimmt und setzt state.input.
3. Übergeben Sie dies onChangean C1 als propsund lassen Sie C1 this.props.onChangean das onChangevon Foo binden .

Das funktioniert. Wenn sich der Wert von Foo ändert, wird a setStatein P ausgelöst, sodass P den Eingang hat, der an C2 übergeben werden kann.

Aber es fühlt sich aus dem gleichen Grund nicht ganz richtig an: Ich setze den Status eines übergeordneten Elements von einem untergeordneten Element aus. Dies scheint das Entwurfsprinzip von React zu verraten: Datenfluss in eine Richtung.
Soll ich das so machen oder gibt es eine reaktionsnatürlichere Lösung?

Zweite Lösung:

Setzen Sie einfach Foo in P.

Aber ist dies ein Entwurfsprinzip, dem ich bei der Strukturierung meiner App folgen sollte - indem ich alle Formularelemente in die renderKlasse der höchsten Ebene einsetze?

Wie in meinem Beispiel möchte ich, wenn ich ein großes Rendering von C1 habe, wirklich nicht das gesamte renderC1 auf renderP setzen, nur weil C1 ein Formularelement hat.

Wie soll ich das machen

Wenn ich Sie also richtig verstehe, schlägt Ihre erste Lösung vor, dass Sie den Status in Ihrer Stammkomponente beibehalten? Ich kann nicht für die Schöpfer von React sprechen, aber im Allgemeinen finde ich, dass dies eine richtige Lösung ist.

Die Aufrechterhaltung des Zustands ist einer der Gründe (zumindest denke ich), warum React erstellt wurde. Wenn Sie jemals eine eigene Client-Seite für Statusmuster implementiert haben, um mit einer dynamischen Benutzeroberfläche umzugehen, die viele voneinander abhängige bewegliche Elemente enthält, werden Sie React lieben, da dies viele dieser Probleme bei der Statusverwaltung lindert.

Wenn Sie den Status in der Hierarchie weiter oben halten und ihn durch Ereignisse aktualisieren, ist Ihr Datenfluss immer noch ziemlich unidirektional. Sie reagieren nur auf Ereignisse in der Root-Komponente. Sie erhalten die Daten dort nicht wirklich über eine bidirektionale Bindung. Sie teilen der Root-Komponente mit, dass "Hey, hier unten ist etwas passiert, überprüfen Sie die Werte", oder Sie übergeben den Status einiger Daten in der untergeordneten Komponente, um den Status zu aktualisieren. Sie haben den Status in C1 geändert und möchten, dass C2 darüber informiert wird. Durch Aktualisieren des Status in der Root-Komponente und erneutes Rendern sind die Requisiten von C2 jetzt synchron, da der Status in der Root-Komponente aktualisiert und weitergegeben wurde .

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }
  render () {
    return (
      <div>
        <C1 onUpdate={this.onUpdate.bind(this)}/>
        <C2 data={this.state.data}/>
      </div>
    )
  }
  onUpdate (data) { this.setState({ data }) }
}

class C1 extends React.Component {
    render () {
      return (
        <div>
          <input type='text' ref='myInput'/>
          <input type='button' onClick={this.update.bind(this)} value='Update C2'/>
        </div>
      )
    }
    update () {
      this.props.onUpdate(this.refs.myInput.getDOMNode().value)
    }
})

class C2 extends React.Component {
    render () {
      return <div>{this.props.data}</div>
    }
})

ReactDOM.renderComponent(<Example/>, document.body)

Nachdem ich jetzt mit React eine App erstellt habe, möchte ich einige Gedanken zu dieser Frage teilen, die ich vor einem halben Jahr gestellt habe.

Ich empfehle Ihnen zu lesen

• In Reaktion denken
• Fluss

Der erste Beitrag ist äußerst hilfreich, um zu verstehen, wie Sie Ihre React-App strukturieren sollten.

Flux beantwortet die Frage , warum Sie Ihre Reaktion App auf diese Weise strukturieren sollen (im Gegensatz zu , wie sie zu strukturieren). Die Reaktion macht nur 50% des Systems aus, und mit Flux können Sie das gesamte Bild sehen und sehen, wie sie ein kohärentes System bilden.

Zurück zur Frage.

Bei meiner ersten Lösung ist es völlig in Ordnung, den Handler in die umgekehrte Richtung gehen zu lassen , da die Daten immer noch in eine Richtung gehen.

Ob ein Handler einen setState in P auslösen lässt, kann jedoch je nach Ihrer Situation richtig oder falsch sein.

Wenn die App ein einfacher Markdown-Konverter ist, wobei C1 die Roheingabe und C2 die HTML-Ausgabe ist, ist es in Ordnung, C1 einen setState in P auslösen zu lassen, aber einige argumentieren möglicherweise, dass dies nicht die empfohlene Methode ist.

Wenn es sich bei der App jedoch um eine Aufgabenliste handelt, wobei C1 die Eingabe für die Erstellung einer neuen Aufgabe ist, C2 die Aufgabenliste in HTML, möchten Sie den Handler wahrscheinlich um zwei Ebenen höher als P - zu der dispatcher, mit der das storeUpdate durchgeführt werden data storekann. die dann die Daten an P senden und die Ansichten füllen. Siehe diesen Flux-Artikel. Hier ist ein Beispiel: Flux - TodoMVC

Im Allgemeinen bevorzuge ich den im Beispiel der Aufgabenliste beschriebenen Weg. Je weniger Status Sie in Ihrer App haben, desto besser.

Die erste Lösung, bei der der Status in der übergeordneten Komponente beibehalten wird , ist die richtige . Bei komplexeren Problemen sollten Sie jedoch an eine State-Management-Bibliothek denken. Redux ist die beliebteste Bibliothek , die bei React verwendet wird.

Fünf Jahre später, mit der Einführung von React Hooks, gibt es jetzt eine viel elegantere Möglichkeit, dies mit useContext hook zu tun.

Sie definieren den Kontext in einem globalen Bereich, exportieren Variablen, Objekte und Funktionen in die übergeordnete Komponente und verpacken untergeordnete Elemente in der App in einen bereitgestellten Kontext und importieren alles, was Sie in untergeordneten Komponenten benötigen. Unten finden Sie einen Proof of Concept.

import React, { useState, useContext } from "react";
import ReactDOM from "react-dom";
import styles from "./styles.css";

// Create context container in a global scope so it can be visible by every component
const ContextContainer = React.createContext(null);

const initialAppState = {
  selected: "Nothing"
};

function App() {
  // The app has a state variable and update handler
  const [appState, updateAppState] = useState(initialAppState);

  return (
    <div>
      <h1>Passing state between components</h1>

      {/* 
          This is a context provider. We wrap in it any children that might want to access
          App's variables.
          In 'value' you can pass as many objects, functions as you want. 
           We wanna share appState and its handler with child components,           
       */}
      <ContextContainer.Provider value={{ appState, updateAppState }}>
        {/* Here we load some child components */}
        <Book title="GoT" price="10" />
        <DebugNotice />
      </ContextContainer.Provider>
    </div>
  );
}

// Child component Book
function Book(props) {
  // Inside the child component you can import whatever the context provider allows.
  // Earlier we passed value={{ appState, updateAppState }}
  // In this child we need the appState and the update handler
  const { appState, updateAppState } = useContext(ContextContainer);

  function handleCommentChange(e) {
    //Here on button click we call updateAppState as we would normally do in the App
    // It adds/updates comment property with input value to the appState
    updateAppState({ ...appState, comment: e.target.value });
  }

  return (
    <div className="book">
      <h2>{props.title}</h2>
      <p>${props.price}</p>
      <input
        type="text"
        //Controlled Component. Value is reverse vound the value of the variable in state
        value={appState.comment}
        onChange={handleCommentChange}
      />
      <br />
      <button
        type="button"
        // Here on button click we call updateAppState as we would normally do in the app
        onClick={() => updateAppState({ ...appState, selected: props.title })}
      >
        Select This Book
      </button>
    </div>
  );
}

// Just another child component
function DebugNotice() {
  // Inside the child component you can import whatever the context provider allows.
  // Earlier we passed value={{ appState, updateAppState }}
  // but in this child we only need the appState to display its value
  const { appState } = useContext(ContextContainer);

  /* Here we pretty print the current state of the appState  */
  return (
    <div className="state">
      <h2>appState</h2>
      <pre>{JSON.stringify(appState, null, 2)}</pre>
    </div>
  );
}

const rootElement = document.body;
ReactDOM.render(<App />, rootElement);

Sie können dieses Beispiel im Code Sandbox-Editor ausführen.

Ich bin überrascht, dass es im Moment, in dem ich schreibe, keine Antworten mit einer einfachen idiomatischen React-Lösung gibt. Also hier ist die eine (vergleiche die Größe und Komplexität mit anderen):

class P extends React.Component {
    state = { foo : "" };

    render(){
        const { foo } = this.state;

        return (
            <div>
                <C1 value={ foo } onChange={ x => this.setState({ foo : x })} />
                <C2 value={ foo } />
            </div>
        )
    }
}

const C1 = ({ value, onChange }) => (
    <input type="text"
           value={ value }
           onChange={ e => onChange( e.target.value ) } />
);

const C2 = ({ value }) => (
    <div>Reacting on value change: { value }</div>
);

Ich setze den Status eines übergeordneten Elements von einem untergeordneten Element aus. Dies scheint das Entwurfsprinzip von React zu verraten: Datenfluss in eine Richtung.

Jede kontrollierteinput (idiomatische Art, mit Formularen in React zu arbeiten) aktualisiert den übergeordneten Status in seinem onChangeRückruf und verrät immer noch nichts.

Schauen Sie sich zum Beispiel die C1-Komponente genau an. Sehen Sie einen signifikanten Unterschied in der Art C1und Weise, wie eine integrierte inputKomponente mit Statusänderungen umgeht? Das solltest du nicht, denn es gibt keine. Das Aufheben des Zustands und das Weitergeben von Wert / onChange-Paaren ist für Raw React idiomatisch. Keine Verwendung von Refs, wie einige Antworten vermuten lassen.

Neuere Antwort mit einem Beispiel, das verwendet React.useState

Es wird empfohlen, den Status in der übergeordneten Komponente beizubehalten. Das übergeordnete Element muss Zugriff darauf haben, da es über zwei untergeordnete Komponenten hinweg verwaltet wird. Das Verschieben in den globalen Status, wie der von Redux verwaltete, wird aus demselben Grund nicht empfohlen, aus dem die globale Variable im Software-Engineering im Allgemeinen schlechter ist als die lokale .

Wenn sich der Status in der übergeordneten Komponente befindet, kann das Kind ihn mutieren, wenn das übergeordnete Element dem Kind valueund dem onChangeHandler Requisiten gibt (manchmal wird es als Wertverknüpfung oder Statusverknüpfungsmuster bezeichnet). So würden Sie es mit Haken machen:

function Parent() {
    var [state, setState] = React.useState('initial input value');
    return <>
        <Child1 value={state} onChange={(v) => setState(v)} />
        <Child2 value={state}>
    </>
}

function Child1(props) {
    return <input
        value={props.value}
        onChange={e => props.onChange(e.target.value)}
    />
}

function Child2(props) {
    return <p>Content of the state {props.value}</p>
}

Die gesamte übergeordnete Komponente wird bei einer Eingabeänderung im untergeordneten Element erneut gerendert. Dies ist möglicherweise kein Problem, wenn die übergeordnete Komponente klein / schnell neu zu rendern ist. Die Leistung beim erneuten Rendern der übergeordneten Komponente kann im allgemeinen Fall weiterhin ein Problem sein (z. B. große Formulare). Dies ist das Problem in Ihrem Fall gelöst (siehe unten).

Das Statusverknüpfungsmuster und kein übergeordnetes erneutes Rendern lassen sich mithilfe der Drittanbieter-Bibliothek wie Hookstate einfacher implementieren - aufgeladen React.useState, um eine Vielzahl von Anwendungsfällen abzudecken, einschließlich Ihres. (Haftungsausschluss: Ich bin Autor des Projekts).

So würde es mit Hookstate aussehen. Child1wird die Eingabe ändern, Child2wird darauf reagieren. Parenthält den Status, wird aber nur bei Statusänderung nicht erneut gerendert Child1und Child2wird.

import { useStateLink } from '@hookstate/core';

function Parent() {
    var state = useStateLink('initial input value');
    return <>
        <Child1 state={state} />
        <Child2 state={state}>
    </>
}

function Child1(props) {
    // to avoid parent re-render use local state,
    // could use `props.state` instead of `state` below instead
    var state = useStateLink(props.state)
    return <input
        value={state.get()}
        onChange={e => state.set(e.target.value)}
    />
}

function Child2(props) {
    // to avoid parent re-render use local state,
    // could use `props.state` instead of `state` below instead
    var state = useStateLink(props.state)
    return <p>Content of the state {state.get()}</p>
}

PS: Es gibt hier viele weitere Beispiele für ähnliche und kompliziertere Szenarien, einschließlich tief verschachtelter Daten, Statusvalidierung, globaler Status mit setStateHook usw. Es gibt auch eine vollständige Online-Beispielanwendung , die den Hookstate und die oben erläuterte Technik verwendet.

Sie sollten die Redux- und ReactRedux-Bibliothek kennenlernen. Sie strukturiert Ihre Status und Requisiten in einem Geschäft und Sie können später in Ihren Komponenten darauf zugreifen.

Mit React> = 16.3 können Sie ref und forwardRef verwenden, um vom übergeordneten Element auf das DOM des Kindes zuzugreifen. Verwenden Sie keine alten Refs mehr.
Hier ist das Beispiel anhand Ihres Falls:

import React, { Component } from 'react';

export default class P extends React.Component {
   constructor (props) {
      super(props)
      this.state = {data: 'test' }
      this.onUpdate = this.onUpdate.bind(this)
      this.ref = React.createRef();
   }

   onUpdate(data) {
      this.setState({data : this.ref.current.value}) 
   }

   render () {
      return (
        <div>
           <C1 ref={this.ref} onUpdate={this.onUpdate}/>
           <C2 data={this.state.data}/>
        </div>
      )
   }
}

const C1 = React.forwardRef((props, ref) => (
    <div>
        <input type='text' ref={ref} onChange={props.onUpdate} />
    </div>
));

class C2 extends React.Component {
    render () {
       return <div>C2 reacts : {this.props.data}</div>
    }
}

Siehe Refs und ForwardRef für detaillierte Informationen über Refs und forwardRef.

1. Das Richtige ist, den Status in der übergeordneten Komponente zu haben , um ref zu vermeiden und was nicht
2. Ein Problem besteht darin, zu vermeiden, dass alle untergeordneten Elemente beim Eingeben in ein Feld ständig aktualisiert werden
3. Daher sollte jedes untergeordnete Element eine Komponente (wie in keiner PureComponent) sein und implementiert werden shouldComponentUpdate(nextProps, nextState)
4. Auf diese Weise wird beim Eingeben in ein Formularfeld nur dieses Feld aktualisiert

Der folgende Code verwendet @boundAnmerkungen aus ES.Next babel-plugin-transform-decorators-legacy von BabelJS 6 und Klasseneigenschaften (die Anmerkung legt diesen Wert für Elementfunktionen fest , die bind ähneln):

/*
© 2017-present Harald Rudell <[email protected]> (http://www.haraldrudell.com)
All rights reserved.
*/
import React, {Component} from 'react'
import {bound} from 'class-bind'

const m = 'Form'

export default class Parent extends Component {
  state = {one: 'One', two: 'Two'}

  @bound submit(e) {
    e.preventDefault()
    const values = {...this.state}
    console.log(`${m}.submit:`, values)
  }

  @bound fieldUpdate({name, value}) {
    this.setState({[name]: value})
  }

  render() {
    console.log(`${m}.render`)
    const {state, fieldUpdate, submit} = this
    const p = {fieldUpdate}
    return (
      <form onSubmit={submit}> {/* loop removed for clarity */}
        <Child name='one' value={state.one} {...p} />
        <Child name='two' value={state.two} {...p} />
        <input type="submit" />
      </form>
    )
  }
}

class Child extends Component {
  value = this.props.value

  @bound update(e) {
    const {value} = e.target
    const {name, fieldUpdate} = this.props
    fieldUpdate({name, value})
  }

  shouldComponentUpdate(nextProps) {
    const {value} = nextProps
    const doRender = value !== this.value
    if (doRender) this.value = value
    return doRender
  }

  render() {
    console.log(`Child${this.props.name}.render`)
    const {value} = this.props
    const p = {value}
    return <input {...p} onChange={this.update} />
  }
}

Das Konzept der Weitergabe von Daten vom Elternteil an das Kind und umgekehrt wird erläutert.

import React, { Component } from "react";
import ReactDOM from "react-dom";

// taken refrence from https://gist.github.com/sebkouba/a5ac75153ef8d8827b98

//example to show how to send value between parent and child

//  props is the data which is passed to the child component from the parent component

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    };
  }

  onUpdateParent = val => {
    this.setState({
      fieldVal: val
    });
  };

  render() {
    return (
      // To achieve the child-parent communication, we can send a function
      // as a Prop to the child component. This function should do whatever
      // it needs to in the component e.g change the state of some property.
      //we are passing the function onUpdateParent to the child
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br />
        <Child onUpdate={this.onUpdateParent} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldValChild: ""
    };
  }

  updateValues = e => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    // onUpdateParent would be passed here and would result
    // into onUpdateParent(e.target.value) as it will replace this.props.onUpdate
    //with itself.
    this.setState({ fieldValChild: e.target.value });
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.updateValues}
          value={this.state.fieldVal}
        />
      </div>
    );
  }
}

class OtherChild extends Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
        <h5>
          the child can directly get the passed value from parent by this.props{" "}
        </h5>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));