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

【问题标题】：Dynamically set form field values in React + Redux在 React + Redux 中动态设置表单字段值
【发布时间】：2016-04-24 23:21:19
【问题描述】：

我的应用商店有一个 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 }

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

【问题讨论】：

标签： forms reactjs redux reducers

【解决方案1】：

你的返回错误，应该是这样的

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

希望对你有帮助。

【讨论】：

【解决方案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));

【讨论】：