成功发送 Redux 表单后如何重置表单答案

【问题标题】：How to reset form after successful sent Redux Form成功发送 Redux 表单后如何重置表单
【发布时间】：2019-05-09 16:44:55
【问题描述】：

我正在使用 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/

更新我的屏幕日志：

非常感谢。

【问题讨论】：

标签： reactjs react-redux redux-form

【解决方案1】：

将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;
}

确保从redux-form 导入reset 函数。

【讨论】：

调度返回未定义。你知道为什么吗？
@HaiTien 您的CommentFormToAPI 组件已连接。在this.props 你会发现dispatch 函数。只需将它作为第二个参数传递给createBlogComment 并在里面使用它:)
CommentForm 连接到 Redux Form，而不是 CommentFormToAPI。 CommentFormToAPI 连接到我自己的减速器。所以我不知道如何调用重置:(
@HaiTien 你已经派出道具了。将其作为第二个参数传递，然后在函数 const createBlogComment = (data, dispatch) => { ... dispatch(reset('CommentForm')) } 中传递
非常感谢。我解决了^^。很有帮助。