Wie Verwenden von SetState, um Daten zu erhalten, nachdem einige Informationen in einem Formular übermittelt werden?

Question

import React from 'react' 

export default class form extends React.Component{ 
/// Handle Submit 
handleSubmit(e){ 
e.preventDefault(); 
} 
/// handle patientname 
handlePatientName(e) { 
    this.setState({ 
     patientname: e.target.value 
    }) 
} 
// handle patient disease 
handlePatientDisease(e){ 
    this.setState({ 
     patientdisease: e.target.value 
    }) 
} 
    // handle patient present illness 
    handlePatientPresentIllness(e){ 
    this.setState({ 
     patientpresentillness: e.target.value 
    }) 
} 


render() { 
    return (
<form> 
    <ul> 
     <li> 
      <label> Patient Name</label> 
      <input type="text" name="patientname" placeholder="nome do paciente" OnChange={this.handlePatientName} /> 

     </li> 
     <li> 
      <label> Patient Disease 
      <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="button" onClick={this.handleSubmit}> Submit </button> 
     </li> 
    </ul> 

</form> 
      ); 
    } 
} 

Ziel: Erhalten von Daten aus dieser Form und zeigt sie in anderer Seite (Sidebar.js) So, nachdem diese Informationen in dieser Form einreichen, mag ich mit SetState und Anzeige nur die patientname in einer Liste, diese Informationen zu erhalten. Wie mache ich das mit SetState?

Answer 1

Zunächst einmal hat der Code mehrere Probleme:

1. Verwenden onChange statt OnChange:

   <input type="text" onChange={this.handlePatientName} /> 
   

2. Ihre Event-Handler nicht auf die Klasseninstanz gebunden sind, werden so this sein undefiniert in Ihrem Rückruf und this.setState() wird fehlschlagen. Sie können diese .bind(this) unter Verwendung lösen:

   onChange={this.handlePatientName.bind(this)} 
   

   Oder durch die Handler in Ihrem Konstruktor Bindung:

   constructor(){ 
       this.handlePatientName = this.handlePatientName.bind(this); 
   } 
   

   Oder durch class properties und Definition der Handler als Pfeil Funktionen:

   handlePatientName = (e) => { } 
   

3. Sie sollten Ihr Bauteil Form oder etwas anderes als form, seitnennenist used for the HTML form element.

4. Sobald dies erledigt ist, geben Sie den Formularstatus noch immer nicht "anderen Seiten" aus. Dazu müssen Sie die Callback-Requisiten bieten sollen, die Daten außerhalb der Komponente zu übergeben:

   handlePatientName = (e) => { 
       let patientName = e.target.value; 
       this.setState({ patientName }); 
       this.props.onPatientNameChange(patientName); 
   } 
   

   Jetzt von einer übergeordneten Seite können Sie die Änderungen erfassen:

   class Parent extends React.Component { 
       handlePatientNameChange = (patientName) => { 
        console.log("Patient name changed to:", patientName); 
       } 
       render() { 
        return (
         <Form onPatientNameChange={this.handlePatientNameChange} /> 
        ); 
       } 
   }