Redux-form：从状态设置表单值

IT技术 reactjs redux redux-form
2021-05-25 03:29:55

我有一个名为addContactForm. 此表单通过插件侦听我的应用程序中的某些操作。请参阅下面的代码以获取说明：

/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 的操作流入这个 reducer 时，我将表单值设置为用户选择的联系人的值。这部分工作正常。

但是，该表单现在被标记为 !pristine && 脏。结果，我的提交按钮没有被禁用，实际上应该在用户决定进行任何更改之前禁用。

所以我的问题是：如何更新表单状态以将其标记为原始状态？

（或我猜无效，但原始感觉是更好的选择）

我曾尝试简单地设置状态对象中的值，但这并没有做任何事情： return {...state, values: { ...payload }, pristine: true };

如果我在这里使用了错误的方法，我也会很感激被指出正确的方向。

1个回答

好的，所以我现在找到了“答案”。我基本上只是按照 redux-form 网站Initialize values from state上的这个示例进行操作。然而，它对我来说并不是开箱即用的。我必须做出两个显着的改变：

  1. 在我对我的调用中，reduxForm我必须传递一个参数enableReinitialize: true。现在在选择联系人后更新值工作正常并且表单被重置为原始状态。但是我的验证功能坏了...
  2. 结果证明这是因为在某个时间点要验证的值是未定义的。为了避免这种情况，我添加了一个子句来提前退出验证功能：if (!values) {return {};}

所以现在一切都按预期进行，事件虽然改变了 nr。2 感觉有点不对劲...

在我的工作代码中最相关的部分下面（在 redux-form 连接组件中）

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;
其它你可能感兴趣的问题
上一篇动作分派后渲染组件 下一篇REACT - 如何将 URL 字符串替换为 <a> 元素并正确呈现它