Очистка форм в React после отправки

Я пытаюсь очистить данные формы после создания отправки формы с помощью Axios. Сообщение проходит нормально, и ответ регистрируется на странице, но данные в каждом текстовом поле остаются на странице после отправки.

Я попытался добавить функцию resetForm, в которой я вернул форму в исходное пустое состояние, но это не работает.

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;

Все, что я действительно хочу, это чтобы текстовые поля fullName, email and message очищались после отправки формы, но данные оставались на странице.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
11 566
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете сделать что-то вроде

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

Это вернет эти значения к нулю.

Спасибо, парни. Я пробовал все эти методы, но ни один из них не работает.

JackJack 18.01.2019 17:59

@JackJack Вы нашли какое-нибудь решение?

GAURAV MOKASHI 12.02.2021 14:24

Ваше состояние обновляется при изменении ввода формы.

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

Состояние не является статическим объектом.

Вам придется вручную обновить значения полей.

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

Вам нужно очистить состояние после отправки. После вызова setState рендеринг реакции будет вызван снова с пустыми значениями, которые мы установили, надеюсь, это поможет.

 .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);
    })
Ответ принят как подходящий

Вам не нужна функция resetForm (полностью избавьтесь от нее), просто установите свое состояние в handleForm следующим образом:

ОБНОВЛЕНИЕ: вам также необходимо добавить значение для каждого входа, чтобы сделать его контролируемым входом, см. ниже:

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;

В качестве примечания: просмотрите ссылки React для захвата элементов dom... подробнее здесь: https://reactjs.org/docs/refs-and-the-dom.html

Спасибо СакоБу. Та же проблема. Он не выдает никаких ошибок, но даже после того, как вы попробовали ваш метод, он все еще не очищается.

JackJack 18.01.2019 18:23

@Ang - о, это еще и потому, что это не контролируемый ввод... Я обновлю свой ответ...

SakoBu 18.01.2019 18:27

Я попробовал ваш обновленный код, но всякий раз, когда я печатаю в любом из текстовых полей, он читает e.target.value, и я не могу изменить значения.

JackJack 18.01.2019 18:54

@Ang... В вашем handleFields избавьтесь от кавычек из 'e.target.value' вместо фактического значения вы получаете строку

SakoBu 18.01.2019 18:55

Из показанного кода не видно, были ли значения полей формы присвоены значениями из состояния. (например, для fullName field: value = this.state.fullName). Если бы значение не было присвоено, форма не была бы перерисована, даже если бы setState был правильно определен.

Другие вопросы по теме