Wie kann ich den Eingangswert auf meiner Funktion anrufen ReactJs

Question

Hallo Ich versuche, den Wert meiner Eingabe in das Formular an meine Abruffunktion aufrufen, aber es kann es nicht lesen, bitte helfen Sie mir ... Ich würde tun eine Abruf Post, so dass ich es in meinem Tisch legen kann ...

meine Funktion ist wie

handleSubmit() { 
    debugger 
    function createNewProfile(profile) { 
    const formData = new FormData(); 
    formData.append('Employee_Name', profile.Employee_Name); 
    formData.append('Address', profile.Address); 
    formData.append('Department', profile.Department); 
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', { 
     method: 'POST', 
     body: formData 
    }).then(response => response.json()) 
    } 

    createNewProfile(profile) 
     .then((json) => { 
      // handle success 
      } 
    ).catch(error => error); 
} 

und dies ist meine Form, wo ich meine

<form onSubmit={this.handleSubmit}> 
    <div className="container"> 
     <div className="modal-body"> 
      <table> 
       <tbody> 
       <tr> 
        <td>Name</td> 
        <td> 
         <input type="text" 
           name="Employee_Name" 
           className="EmployeeDetails" 
           value={this.props.Employee_Name}/> 
        </td> 
       </tr> 
       <tr> 
        <td>Address</td> 
        <td> 
         <input type="text" 
           name="Address" 
           className="EmployeeDetails" 
           value={this.props.Address} 
           onChange={this.props.handleChange}/> 
        </td> 
       </tr> 
       <tr> 
        <td>Department</td> 
        <td> 
         <input type="text" 
           name={this.props.Department} 
           className="EmployeeDetails" 
           value={this.props.Department}/> 
        </td> 
       </tr> 
       </tbody> 
      </table> 

     </div> 
    </div> 
    <div className="modal-footer"> 
     <input type="submit" className="btn btn-info" onClick={ this.handleSubmit} value=" Add Employee"/> 
     <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</form> 

Answer 1

Sie steuern die Form wollen Werte von der Elternkomponente, also werde ich s uggest Sie, um eine Submit-Funktion auch von der Elternkomponente und onClick von submit zu übergeben, tun Sie den api-Aufruf in Eltern.

Wenn Sie einen API-Aufruf in der übergeordneten Komponente ausführen, müssen Sie auf die Werte von this.state.key zugreifen, und wenn Sie den API-Aufruf in Kind ausführen, müssen Sie this.props.key verwenden, um auf die Werte zuzugreifen.

Hinweis: Ich gehe davon aus, dass Sie die Eingabewerte in der übergeordneten Komponente bei der Änderung der untergeordneten Komponente aktualisieren, da Sie die onChange-Funktion übergeordnet übergeben haben.

API-Aufruf in den Kindern Komponente:

handleSubmit(){ 
    let profile = this.props; 
    const formData = new FormData(); 
    formData.append('Employee_Name', profile.Employee_Name); 
    formData.append('Address', profile.Address); 
    formData.append('Department', profile.Department); 
    fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', { 
     method: 'POST', 
     body: formData 
    }) 
    .then(response => response.json()) 
    .then(response => { 
     //handle success 
    }) 
} 

API-Aufruf in Stammkomponente:

handleSubmit(){ 
    let profile = this.state; 
    const formData = new FormData(); 
    formData.append('Employee_Name', profile.Employee_Name); 
    formData.append('Address', profile.Address); 
    formData.append('Department', profile.Department); 
    fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', { 
     method: 'POST', 
     body: formData 
    }) 
    .then(response => response.json()) 
    .then(response => { 
     //handle success 
    }) 
} 

Update:

Sie müssen die handleSubmit Funktion in binden das Konstrukt tor, schreiben Sie den Konstruktor wie folgt aus:

constructor(){ 
    super(); 
    this.state = {}; 
    this.handleSubmit = this.handleSubmit.bind(this) 
}