我有一个名为 addContactForm
的 redux-form。该表单通过插件监听我的应用程序中的一些操作。请参阅下面的代码以获取说明:
/reducers/index.js
import { combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form'
import AddContactFormPlugin from './add-contact-form-plugin';
const rootReducer = combineReducers({
form: reduxFormReducer.plugin({
addContactForm: AddContactFormPlugin
})
});
export default rootReducer;
/reducers/add-contact-form-plugin.js
import { SET_CURRENT_CONTACT, CLEAR_CURRENT_CONTACT } from '../constants';
export default function (state, {type, payload}) {
switch (type) {
case SET_CURRENT_CONTACT:
// !!! MY PROBLEM IS ON THE NEXT LINE
return {...state, values: { ...payload }};
case CLEAR_CURRENT_CONTACT:
return {...state, values: getEmptyValues()};
default:
return state;
}
}
function getEmptyValues() {
return {
firstName: '',
lastName: '',
phone: ''
}
}
为了澄清这里发生的情况:当类型为 SET_CURRENT_CONTACT 的操作流入此化简器时,我将表单值设置为用户选择的联系人的值。这部分工作正常。
但是,该表单现在被标记为 !pristine && dirty。因此,我的提交按钮没有被禁用,实际上应该是这样,直到用户决定进行任何更改。
所以我的问题是:如何更新表单状态以将其标记为原始?
(或者我猜是无效的,但原始感觉是更好的选择)
我尝试简单地设置状态对象中的值,但这没有做任何事情:
返回{...状态,值:{ ...有效负载},原始:true };
如果我在这里使用了错误的方法,我也希望能指出正确的方向。
最佳答案
好的,我现在找到了“答案”。我基本上只是按照 redux-form 网站 Initialize values from state 上的这个示例进行操作。然而,它对我来说并不是开箱即用的。我必须做出两个显着的改变:
- 在调用
reduxForm
时,我必须传递一个参数enableReinitialize: true
。现在,在选择联系人后更新值可以正常工作,并且表单已重置为原始状态。但我的验证功能坏了...... - 事实证明,这是因为在某个时间点要验证的值未定义。为了避免这个问题,我添加了一个子句来提前退出验证函数:
if (!values) {return {};}
现在一切都按预期进行,尽管编号发生了变化。 2 感觉有点不对劲...
下面是我的工作代码中最相关的部分(在 redux 形式的连接组件中)
const getInitialValues = (currContact) => {
if (currContact) {
const { firstName, lastName, phone } = currContact;
return { firstName, lastName, phone };
}
return { firstName: '', lastName: '', phone: ''};
}
const reduxConnectedForm = reduxForm({
form: 'addContactForm',
validate,
enableReinitialize: true
})(AddContactForm);
function mapStateToProps (state) {
return {
initialValues: getInitialValues(state.currContact)
};
}
const connectedForm = connect(
mapStateToProps,
)(reduxConnectedForm);
export default connectedForm;
关于reactjs - Redux-form:从状态设置表单值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40761201/