首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在redux表单中单击提交后,如何不重置字段中的数据?

在redux表单中,单击提交后不重置字段中的数据,可以通过以下步骤实现:

  1. 在redux的reducer中,定义一个新的action类型,例如"SUBMIT_FORM"。
  2. 在reducer中,处理"SUBMIT_FORM"类型的action,将表单数据保存到state中的一个新字段,例如"submittedData"。
  3. 在表单组件中,使用connect函数将redux的state和action与表单组件进行绑定。
  4. 在表单组件中,使用onSubmit事件处理程序来触发"SUBMIT_FORM"类型的action,并阻止表单的默认提交行为。
  5. 在表单组件中,使用redux的state中的"submittedData"字段来初始化表单的初始值。

这样,当用户单击提交按钮时,表单数据将被保存到redux的state中的"submittedData"字段,而不会重置表单字段中的数据。同时,表单组件也可以通过redux的state中的"submittedData"字段来初始化表单的初始值。

以下是一个示例代码:

代码语言:txt
复制
// Redux reducer
const initialState = {
  submittedData: null,
};

const formReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SUBMIT_FORM":
      return {
        ...state,
        submittedData: action.payload,
      };
    default:
      return state;
  }
};

// Redux action
const submitForm = (data) => {
  return {
    type: "SUBMIT_FORM",
    payload: data,
  };
};

// Form component
import React from "react";
import { connect } from "react-redux";
import { submitForm } from "./actions";

class Form extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData.entries());
    this.props.submitForm(data);
  };

  render() {
    const { submittedData } = this.props;
    const initialValues = submittedData || {};

    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="name" defaultValue={initialValues.name} />
        <input type="email" name="email" defaultValue={initialValues.email} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    submittedData: state.form.submittedData,
  };
};

export default connect(mapStateToProps, { submitForm })(Form);

请注意,以上示例代码中并未提及任何特定的云计算品牌商,如需了解腾讯云相关产品和产品介绍,建议访问腾讯云官方网站或咨询腾讯云官方客服。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

14分30秒

Percona pt-archiver重构版--大表数据归档工具

5分33秒

JSP 在线学习系统myeclipse开发mysql数据库web结构java编程

31分41秒

【玩转 WordPress】腾讯云serverless搭建WordPress个人博经验分享

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券