Formik是一个用于构建表单的React库,它提供了一种简化和优化表单处理的方式。Formik可以帮助开发人员处理表单的验证、状态管理、错误处理和提交等功能。
在Redux存储中使用Formik时,可以将Formik的初始值存储在Redux的状态中。这样做的好处是可以将表单的初始值与其他Redux状态进行关联,方便在不同组件之间共享和管理。
以下是一个示例代码,展示了如何在Redux存储中使用Formik的初始值:
const initialState = {
formikValues: {
name: '',
email: '',
password: '',
},
};
const formikReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_FORMIK_VALUES':
return {
...state,
formikValues: {
...state.formikValues,
[action.field]: action.value,
},
};
default:
return state;
}
};
const updateFormikValues = (field, value) => ({
type: 'UPDATE_FORMIK_VALUES',
field,
value,
});
import { connect } from 'react-redux';
import { updateFormikValues } from './actions';
const MyForm = ({ formikValues, updateFormikValues }) => {
const handleChange = (e) => {
const { name, value } = e.target;
updateFormikValues(name, value);
};
return (
<form>
<input
type="text"
name="name"
value={formikValues.name}
onChange={handleChange}
/>
<input
type="email"
name="email"
value={formikValues.email}
onChange={handleChange}
/>
<input
type="password"
name="password"
value={formikValues.password}
onChange={handleChange}
/>
</form>
);
};
const mapStateToProps = (state) => ({
formikValues: state.formikValues,
});
export default connect(mapStateToProps, { updateFormikValues })(MyForm);
在上述示例中,我们通过Redux存储的方式将Formik的初始值存储在formikValues
字段中。通过Redux的connect
函数将Redux状态中的formikValues
映射到组件的props中,然后在表单的输入框中使用这些值。当输入框的值发生变化时,通过Redux的updateFormikValues
函数更新Redux状态中的对应字段的值。
这样,我们就可以在Redux存储中使用Formik的初始值,并且可以方便地在不同组件中共享和管理这些值。
领取专属 10元无门槛券
手把手带您无忧上云