成功“提交”后,ReduxForm重置表单

时间:2019-07-12 05:57:41

标签: reactjs redux redux-form

我想在成功提交后重设表单,我尝试按照reduxForm指南中的说明进行“重设”派遣,但没有获得任何运气,问题是我无法在表单中添加“重设”下面是我的代码块:

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);  

预先感谢:)

下面是我的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)

1 个答案:

答案 0 :(得分:1)

它们会在您的组件中插入line(size)函数,此函数将重置所有字段的值。您可以检查here

不是从redux-form导入,而是从组件props获取