是指将redux-form表单组件中的脏属性(dirty)存储在redux的全局状态管理中。
脏属性是指表单中的字段值与初始值不一致,即表单字段被修改过。redux-form提供了一个dirty属性来标记表单字段的脏属性状态。
为了在redux Store中存储redux-form的脏属性,可以通过以下步骤实现:
// formReducer.js
const initialState = {
formData: {}, // 存储表单数据
dirtyFields: [], // 存储脏属性字段
};
const formReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_FORM_DATA':
return {
...state,
formData: {
...state.formData,
[action.payload.field]: action.payload.value,
},
};
case 'SET_DIRTY_FIELDS':
return {
...state,
dirtyFields: action.payload.dirtyFields,
};
default:
return state;
}
};
export default formReducer;
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
const MyForm = ({ dirtyFields, handleSubmit }) => {
const handleFieldChange = (field, value) => {
// 更新表单字段值到redux Store
dispatch({ type: 'UPDATE_FORM_DATA', payload: { field, value } });
// 更新脏属性字段到redux Store
const updatedDirtyFields = value ? [...dirtyFields, field] : dirtyFields.filter(f => f !== field);
dispatch({ type: 'SET_DIRTY_FIELDS', payload: { dirtyFields: updatedDirtyFields } });
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name</label>
<Field name="name" component="input" type="text" onChange={e => handleFieldChange('name', e.target.value)} />
</div>
{/* 其他表单字段 */}
<button type="submit">Submit</button>
</form>
);
};
const mapStateToProps = state => ({
dirtyFields: state.form.dirtyFields,
});
export default connect(mapStateToProps)(reduxForm({ form: 'myForm' })(MyForm));
通过以上步骤,我们可以将redux-form表单组件中的脏属性存储在redux Store的全局状态管理中,以便在其他组件中获取和使用。在实际应用中,可以根据需要对表单数据和脏属性进行进一步处理和利用。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云