重置在提交Redux表单上提交的输入

时间:2019-07-10 10:43:07

标签: reactjs redux redux-form

我正在尝试使用Redux在其站点上提供的表单示例中的ref调度重置,但是在给定的过程中失败的是我尝试实现的代码:

import {reset} from 'redux-form';
import {connect} from 'react-redux';


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
};
const mapDispatchToProps = dispatch => {
  return {
    reset:(dct)=>dispatch(reset('DCTForm'))
  }
}


export default connect(null,mapDispatchToProps)(reduxForm({form: "DCTForm"})(DCTForm);

先谢谢了:)

1 个答案:

答案 0 :(得分:0)

我建议对输入字段使用单一的事实来源。而不是使用refs。使用onChange事件处理程序,此onchange事件处理程序应将sate属性设置为包含输入字段的值。此外,将输入字段的value属性设置为this.state.inputField(无论输入字段是)

input tag event

State