Как сбросить форму после успешной отправки формы Redux - PullRequest
0 голосов
/ 08 декабря 2018

Я использую форму Redux.

Я хочу сбросить форму, если данные успешно отправлены.

import React, { Component } from "react";
import {
    BrowserRouter as Router,
    Route,
    Switch,
    withRouter
} from 'react-router-dom';
import CommentForm from '../components/CommentForm'; 
import { connect } from "react-redux";
import {authHeader} from '../components/auth-header'; 
import $ from 'jquery';
import { reset, reduxForm } from 'redux-form';

const createBlogComment = (data) => {
    return fetch(CelestialSettings.URL.api + '/comments', {
      method: 'post',
      headers: {
        ...authHeader(),
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(res => {
      if (res.status === 401) {
        $('.thecmstatus').removeClass('success').addClass('error').html('There is something wrong while posting a comment');
        return false;
      }
      if (res.status === 400) {
        $('.thecmstatus').removeClass('success').addClass('error').html('There is something wrong while posting a comment');
        return false;
      }
      if (res.status === 201) {
        $('.thecmstatus').removeClass('error').addClass('success').html('Your comment will be visible after approval');
        setTimeout(function() {
          $('.thecmstatus').html(''); 
        }, 3000);
        return true;
      }
    }).catch(err => err);
}
class CommentFormToAPI extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this); 
    }
    handleSubmit(content) {
      let APIdata = {...this.props.addComment, content:content.commentcontent};
      createBlogComment(APIdata);
      if(createBlogComment(APIdata)){
        //I use this but it is wrong.
        dispatch(reset('CommentForm'));
      }
    }
    render() {
      return (
        <div>
          <CommentForm onSubmit={this.handleSubmit}></CommentForm>
        </div>
      );
    }
}

function mapStateToProps(state){
    return {
      addComment: state.addComment,
    };
};
export default connect(mapStateToProps)(withRouter(CommentFormToAPI)); 

Я могу обработать отправку после отправки API, но я не знаю, как сбросить форму Redux.Можете ли вы предложить мне.

Я посмотрел здесь, и я использую последний способ (D).https://redux -form.com / 6.0.0-alpha.4 / docs / faq / howtoclear.md /

Обновить журнал экрана: enter image description here

Спасибо большое.

1 Ответ

0 голосов
/ 08 декабря 2018

Передайте dispatch в вашу функцию createBlogComment:

createBlogComment(APIdata, dispatch)

Затем, в случае ответа 201:

if (res.status === 201) {
    $('.thecmstatus').removeClass('error').addClass('success').html('Your comment will be visible after approval');
    setTimeout(function() {
      $('.thecmstatus').html(''); 
    }, 3000);

    dispatch(reset('YourFormName'));

    return true;
}

Убедитесь, что вы импортировалиreset функция от redux-form.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...