Wie wird ein React-Bootstrap-Formular nach dem Senden zurückgesetzt?

Question

Ich habe React-Bootstrap zu meiner App hinzugefügt. Also ändere ich ein Basisformular mit React-Bootstrap-Komponenten.

Ich kann ein Formular nach einem Senden nicht zurücksetzen.

Hier ist meine vereinfachte Code:

import React from 'react'; 
import { Form, FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap'; 

class MyForm extends React.Component { 

    onSubmit(event) { 
     event.preventDefault(); 
     const textAreaValue = this.textArea.value; 
     console.log("textAreaValue : ", textAreaValue); 


     // some code here... 

     // ERROR HERE (but it works if I 
     // replace bootstrap <Form> 
     // component by a simple <form> 
     this.messageForm.reset(); 
    } 

    render() { 

     return (
      <Form 
       className="form" 
       ref={ form => this.messageForm = form } 
       onSubmit={ this.onSubmit.bind(this) } 
      > 

       <FormGroup controlId="formControlsTextarea"> 
        <ControlLabel>My Control Label</ControlLabel> 
        <FormControl 
         required 
         inputRef={ input => this.textArea = input } 
         componentClass="textarea" /> 
       </FormGroup> 

       <Button type="submit">ok</Button> 
      </Form> 
     ); 

    } 

} 
export default MyForm; 

ich ein normales weiterverwenden könnte dann funktioniert es, aber ich frage mich, wie zu verwenden, die eine Komponente von React-Bootstrap.

Hat jemand eine Idee?

---

Der Fehler:

× TypeError: this.messageForm.reset is not a function 

Als ich log this.messageForm es ein Reaktivierungs Bootstrap-Komponente. Ich habe auch mit inputRef statt ref getestet, aber es funktioniert nicht

Answer 1

Durch die Art und Weise schlage ich die einfachste einfache <form> nur <Form> statt Reagieren-Bootrasp verwenden soll. Und dann funktioniert this.messageForm.reset() gut.

Aber wenn aus irgendwelchen Gründen Sie benötigen Bootstrap-Formular-Komponente zu verwenden, eine ID zum Formular hinzufügen wie folgt:

 <Form 
      id='myForm' 
      className="form" 
      ref={ form => this.messageForm = form } 
      onSubmit={ this.onSubmit.bind(this) }> 
      ... 
     </Form> 

Und in dem Verfahren onSubmit, Zugriff auf das Formularelement von React-Bootstrap erstellt wie folgt :

ReactDOM.findDOMNode(this.messageForm).reset(); 

Answer 2

Verwenden Sie https://redux-form.com/, um Ihre Eingabefelder zu verwalten.

Auf diese Weise haben Sie viel Kontrolle über Ihre Formularfelder.

https://codesandbox.io/s/7m0m386m26