DevCo
DevCo

Reputation: 479

ReduxForm reset form after successful "on-submit"

I want to reset my form after successful submission, I tried 'reset' dispatch as mentioned in reduxForm guidelines but not getting any luck with it, the problem is I am not getting the point where to add 'reset' in my form below is my code block :

import React from 'react';
import DCTLeft from './DctLeft'
import DCTRight from './DctRight';
import DCTForm from './dctForm';
import { sendNewMessage } from '../../actions/messages';
import {connect} from 'react-redux';
import {reset} from 'redux-form';

class DCT extends React.PureComponent {
    handleSubmit = (value) => {
        this.props.sendNewMessage(value);
      }
render(){
    const { messages } = this.props;
    console.log(messages)
    return (
      <section className="btns">
        <section className="navLR">
          <DCTLeft/>
          <DCTRight/>
        </section>
        <section className="scroll">
          <section className="chat_show">
            {messages && messages.map((messages, index) => (
              <dl key={index}>
              <span className="username">{messages.displayName} :</span> <dd>{messages.text}</dd>
              </dl>
            ))}
          </section>
        </section>
        <DCTForm onSubmit={this.handleSubmit} />
      </section>

    );
}
}
const mapDispatchToProps = dispatch => {
    return {
      sendNewMessage: (msg) => dispatch(sendNewMessage(msg)),

    }
  }
  const mapStateToProps = state => ({
  messages: state.messages.list,
  counter: state.counter.counter
});

export default connect(mapStateToProps,mapDispatchToProps) (DCT);  

Thanks in advance :)

below is my code for my DCTForm :

const DCTForm = ({ handleSubmit, onSubmit }) => (
  <section className="chat-bg">
    <form className="chatBoxForm" onSubmit={handleSubmit(onSubmit)}  >
      <section className="input_container">
        <Input
          name="message"
          type="text"
        />
        <img src={Arrow_up} className="icon-static input_img" alt="Arrow_up" />
        <img src={Paper_plane} className="icon-static input_img_2" alt="Paper_plane" />
      </section>
    </form>
  </section>
);

DCTForm.propTypes = {
  handleSubmit: PropTypes.func,
  onSubmit: PropTypes.func
};

DCTForm.defaultProps = {
  handleSubmit: noop,
  onSubmit: noop
};

export default reduxForm({
  form: "DCTForm"
})(DCTForm)

Upvotes: 0

Views: 609

Answers (1)

aquilesb
aquilesb

Reputation: 2262

They inject in your component props the reset function, this function reset the values of all fields. You can check here

Instead of import from redux-form, get it from the component props

Upvotes: 1

Related Questions