Ich versuche, die Formulardaten zu löschen, sobald ich mit Axios eine Formularübermittlung erstellt habe. Die Nachricht wird ordnungsgemäß verarbeitet und die Antwort wird auf der Seite protokolliert, aber die Daten in jedem Textfeld bleiben nach dem Senden auf der Seite.

Ich habe versucht, eine resetForm -Funktion hinzuzufügen, mit der ich das Formular auf den ursprünglichen leeren Zustand zurückgesetzt habe, aber das funktioniert nicht.

import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";

class Contact extends Component {
    constructor(props){
        super(props);
        this.state = {fullName: "", email: "", message: ""};
    }  

    resetForm = () => {
        this.baseState = this.state
        this.setState(this.baseState)
    }

    handleForm = e => {
        axios.post(
        "https://formcarry.com/s/axiosID", 
        this.state, 
        {headers: {"Accept": "application/json"}}
        )
        .then(function (response) {
            let successMessage = document.querySelector('.success-message');
            successMessage.innerHTML = JSON.stringify(response.data.title);
        })
        .catch(function (error) {
            let successMessage = document.querySelector('.success-message');
            successMessage.innerHTML = JSON.stringify(error);
        });

        e.preventDefault();
    }
    handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });

        render() {
            return (
                    <Grid>
                        <Cell col={6}>
                            <h2>Contact Me</h2>
                            <hr/>
                            <div style={{ width: '100%' }} className="contact-list">
                                <form onSubmit={this.handleForm}>
                                    <Cell col={12}>
                                        <Textfield type="text" id="fullName" name="fullName" className="full-name"
                                        onChange={this.handleFields}
                                        label="Full name"
                                        floatingLabel
                                        style={{width: '200px'}}
                                        />
                                    </Cell>
                                    <Cell col={12}>
                                    {/* Textfield with floating label */}
                                        <Textfield type="email" id="email" name="email" className="email-address"
                                        onChange={this.handleFields}
                                        label="Email address"
                                        floatingLabel
                                        style={{width: '200px'}}
                                        />
                                    </Cell>
                                    <Cell col={12}>
                                        {/* Floating Multiline Textfield */}
                                        <Textfield name="message" id="message" className="text-body"
                                        onChange={this.handleFields}
                                        label="Your message..."
                                        rows={10}
                                        style={{width: '400px'}}
                                        />
                                    </Cell>
                                    <Button raised accent ripple type="submit" onClick={this.resetForm}>Send</Button>
                                    <div className="success-message">
                                        <label></label>
                                    </div>
                                </form>
                            </div>
                        </Cell>
                    </Grid>
            )
        }
    }


export default Contact;

Ich möchte nur, dass die Textfelder fullName, email and message gelöscht werden, sobald ich das Formular abschicke, die Daten jedoch auf der Seite verbleiben.

3
JackJack 18 Jän. 2019 im 19:29

5 Antworten

Beste Antwort

Sie benötigen die Funktion resetForm nicht (entfernen Sie sie vollständig). Legen Sie einfach Ihren Status in der handleForm wie folgt fest:

UPDATE: Sie müssen außerdem jedem Eingang den Wert prop hinzufügen, um ihn zu einem kontrollierten Eingang zu machen (siehe unten):

import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";

class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = { fullName: "", email: "", message: "" };
  }

  handleForm = e => {
    axios.post(
      "https://formcarry.com/s/axiosID",
      this.state,
      { headers: { "Accept": "application/json" } }
    )
      .then(function (response) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(response.data.title);
      })
      .catch(function (error) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(error);
      });

    e.preventDefault();
    this.setState({fullName: '', email: '', message: ''}) // <= here
  }
  handleFields = e => this.setState({ [e.target.name]: e.target.value }); 

  render() {
    return (
      <Grid>
        <Cell col={6}>
          <h2>Contact Me</h2>
          <hr />
          <div style={{ width: '100%' }} className="contact-list">
            <form onSubmit={this.handleForm}>
              <Cell col={12}>
                <Textfield type="text" id="fullName" name="fullName" className="full-name"
                  onChange={this.handleFields}
                  value={this.state.fullName} // <= here
                  label="Full name"
                  floatingLabel
                  style={{ width: '200px' }}
                />
              </Cell>
              <Cell col={12}>
                {/* Textfield with floating label */}
                <Textfield type="email" id="email" name="email" className="email-address"
                  onChange={this.handleFields}
                  value={this.state.email} // <= here
                  label="Email address"
                  floatingLabel
                  style={{ width: '200px' }}
                />
              </Cell>
              <Cell col={12}>
                {/* Floating Multiline Textfield */}
                <Textfield name="message" id="message" className="text-body"
                  onChange={this.handleFields}
                  value={this.state.message} // <= here
                  label="Your message..."
                  rows={10}
                  style={{ width: '400px' }}
                />
              </Cell>
              <Button raised accent ripple type="submit">Send</Button>
              <div className="success-message">
                <label></label>
              </div>
            </form>
          </div>
        </Cell>
      </Grid>
    )
  }
}


export default Contact;

Als Randnotiz: Schauen Sie in React refs nach, um dom-Elemente zu erhalten ... lesen Sie hier mehr: https://reactjs.org/docs/refs-and-the-dom.html

3
SakoBu 18 Jän. 2019 im 17:56

Sie müssen den Status nach der Übermittlung löschen. Nach dem Aufruf von setState wird das React-Rendering erneut mit leeren Werten aufgerufen, die wir festgelegt haben. Ich hoffe, dies hilft

 .then(function (response) {
        let successMessage = document.querySelector('.success-message');
         // here clear the state,
         this.setState({
           fullName: '',
           email: '',
           message: '',
         });
        successMessage.innerHTML = JSON.stringify(response.data.title);
    })
2
Aashish Karki 18 Jän. 2019 im 16:36

Sie könnten so etwas tun

 resetForm = () => {
    this.setState({fullName: "", email: "", message: ""});
}

Das würde diese Werte auf nichts zurücksetzen.

1
remoo 18 Jän. 2019 im 16:33

Ihr Status wird aktualisiert, wenn Sie die Formulareingabe ändern.

handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });

Der Status ist kein statisches Objekt.

Sie müssen die Feldwerte manuell aktualisieren.

resetForm = () => {
    this.setState({fullName: "", email: "", message: ""})
}
1
Rishabh 18 Jän. 2019 im 16:34

Aus dem angezeigten Code ist nicht ersichtlich, ob Werte von Formularfeldern durch Werte aus dem Status zugewiesen wurden. (z. B. für fullName field: value = this.state.fullName). Wenn kein Wert zugewiesen worden wäre, wäre das Formular nicht neu gerendert worden, obwohl setState ordnungsgemäß definiert worden wäre.

0
gehbiszumeis 14 Jän. 2020 im 12:04