在redux表单中,单击提交后不重置字段中的数据,可以通过以下步骤实现:
这样,当用户单击提交按钮时,表单数据将被保存到redux的state中的"submittedData"字段,而不会重置表单字段中的数据。同时,表单组件也可以通过redux的state中的"submittedData"字段来初始化表单的初始值。
以下是一个示例代码:
// 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);
请注意,以上示例代码中并未提及任何特定的云计算品牌商,如需了解腾讯云相关产品和产品介绍,建议访问腾讯云官方网站或咨询腾讯云官方客服。
领取专属 10元无门槛券
手把手带您无忧上云