Passing Daten an andere Komponente

Question

Form.js

import React from 'react' 

export default class Form extends React.Component{ 

    handlePatientDisease(e){ 
     this.setState({ 
      patientdisease: e.target.value 
     }) 
    } 
     handlePatientPresentIllness(e){ 
     this.setState({ 
      patientpresentillness: e.target.value 
     }) 
    } 
    handlePatientName(e){ 
    let patientName = e.target.value 
    this.setState({ patientName }) 
    this.props.onPatientNameChange.value 
} 

handleSubmit(e){ 
    e.preventDefault(); 
    console.log("Patient name changed to:", patientName.value) 
    } 

render() { 
    return (
    <form onSubmit={this.handleSubmit}> 
     <ul> 
      <li> 
       <label> Nome do Paciente </label> 
       <input type="text" name="patientName" id="patientName" placeholder="nome do paciente" onChange={this.handlePatientName.bind(this)} /> 

      </li> 
      <li> 
       <label> Doença 
       <input type="text" name="patientdisease" placeholder="disease"/> 
       </label> 
      </li> 
      <li> 
       <label> Histórico 
       <input type="text" name="patientpresentillness" placeholder="historia do paciente"/> 
       </label> 
      </li> 


      <li> 
       <button type="submit"> Submit </button> 
      </li> 
     </ul> 

</form> 
     ); 
} 


} 

So, jetzt kann ich bereits die in dieser Form übermittelten Daten und auf der Konsole zeigen. Wie zeige ich jetzt in einer anderen Komponente an? Ich möchte auf diese Daten als ein Listenelement in dieser Komponente unter:

Sidebar.js

import React from 'react' 
import patientName from './Form' 

export default class Sidebar extends React.Component{ 
    handlePatientNameChange(patientName){ 
     console.log("Patient name changed to:", patientName) 
    } 

render() { 
    return(
     <div class="container-fluid"> 
      <div class="row"> 
      <div class="col-sm-3 col-md-2 sidebar"> 
       <ul class="nav nav-sidebar"> 

       <li><a href="#">Alexandre Miranda</a></li> 
       <li><a href="#">Felipe Neves</a></li> 
       <li><a href="#">Andressa Lyra</a></li> 
       <li><a href="#">Artur Lyra</a></li> 
       <li><a href="#">Antonio Lyra</a></li> 
       <li><a href="#">Ricardo Lyra</a></li> 
       // When I submit, I want to show the patientName here as a list item....    



       </ul> 

      </div> 
      </div> 
      </div> 

     ); 
} 

} 

Answer 1

Sie benötigen eine Art gemeinsamen Datenspeicher, auf den beide Komponenten zugreifen können, Ihr Formular und Ihre Seitenleiste.

Der naive Ansatz wäre, ein globales Array zu erstellen, das Ihre Patientenliste enthält. Dies ist von überall in Ihrer Anwendung zugänglich und kann aus dem Formular geschrieben sowie aus der Seitenleiste gelesen werden. Es gibt jedoch viele Diskussionen, warum globale Variablen eine schlechte Idee sein können, daher ist diese Lösung höchstwahrscheinlich nicht die bevorzugte Lösung.

---

Eine bessere Option zu würde halten die Liste in den state von einer gemeinsamen Vorfahren Komponente der Form und der Seitenleiste. Sprich, wenn Ihre Anwendung wie folgt strukturiert:

<App> 
    <Form /> 
    <Sidebar /> 
</App> 

, anstatt sie in dem Zustand der Form hält, dann in App, sollte sie in ihrem Zustand und übergibt es an Sidebar über seine Requisiten nach unten.

---

Sobald Ihre Anwendung komplexer wird, sollten Sie denken über eine allgemeinere Ansatz Ihrer Anwendung Daten an einem zentralen Ort zu speichern außerhalb Ihrer React Komponenten. Während es Dutzende von gültigen Lösungsansätzen für dieses Problem gibt, können Sie in Flux oder Redux als Ausgangspunkt suchen.

Answer 2

Ihr Beispiel zeigt nicht, was ist die Verbindung zwischen der Seitenleiste und dem Formularkomponente. Werden sie in derselben übergeordneten Komponente gerendert?

Im Allgemeinen müssen Sie den Rückruf Sidebar in die Komponente Form hinzufügen. Callback wird beim Einreichen mit dem neuen Wert aufgerufen. Sidebar-Komponente wird dann seinen Status aktualisieren und erneut rendern.