Question

我的应用商店有一个store.authState子树。在这个子树中，有三个东西，authToken，isFetching布尔，最重要的是fields对象。我的表单包含两个字段：username和password。

我创建了一个名为SET_FORM_FIELD_VALUE的动作，该动作应该生成并更新用户更改的每个字段的状态。

我希望我的SET_FORM_FIELD_VALUE更新fields对象。如果用户通常填写username和password字段，我的store.authState应如下所示：

{
    authToken: undefined,
    isFetching: false,
    fields: {
        username: "Brachamul",
        password: "azerty123"
    }
}

然而，似乎我当前的代码实际上只是覆盖了所有内容，我最终得到了：

{
    field: {
        username: "Brachamul"
    }
}

字段中的数据根据我上次编辑的字段而变化。它是用户名或密码。

这是我的代码：

switch (action.type) {
    case 'SET_FORM_FIELD_VALUE':
        let field = {} // create a "field" object that will represent the current field
        field[action.fieldName] = action.fieldValue // give it the name and value of the current field
        return { ...state.fields, field }

如何更改它以解决我的问题？

Answer 1

你的回归是错的，应该是这样的

switch (action.type) {
    case 'SET_FORM_FIELD_VALUE':
             return {
                   ...state,
                   fields: {
                         ...state.fields,
                         [action.fieldName] : action.fieldValue
                   }
             }
}

希望它有所帮助。

Answer 2

我从“ redux-form”中使用了change()

只会重新呈现特定的表单输入，并且经常发布它。每次用户单击下拉菜单时，它都会在2个输入字段中建议值

我从anwser和其他一些东西中提取了html。


import { FieldArray, Field, change, reduxForm } from 'redux-form';


class WizardFormThirdPage extends react.component{

runInject(target,value){
    target.value= value; // sets the client html to the value
    // change (formName, Fieldname, Value) in the state
    this.props.dispatch(change('spray-record', target.name, value))
  }

injectFormvalues(){

      var tr = div.querySelector(".applicator-equipment");
      var name = div.querySelector("select").value;
      if(!name.includes("Select Employee")){
        // var inputs = tr.querySelectorAll("input");

        var employeeDoc= findApplicatorByName(name); // synchronous call to get info
        tractor = tr.querySelector("input")
        sprayer = tr.querySelectorAll("input")[1];
        // here i send off the change attribute
        this.runInject(tractor,Number(employeeDoc.default_t))
        this.runInject(sprayer,Number(employeeDoc.default_s));
}

}


// you have to connect it get the dispatch event.
export default connect(state => ({
  enableReinitialize: true,
}))(reduxForm({
  form: "myFormName", //                 <------ same form name
  destroyOnUnmount: false, //        <------ preserve form dataLabel
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate,
})(WizardFormThirdPage));

在React + Redux中动态设置表单字段值

2 个答案: