获取未知表单的 Redux 表单值

Question

我有一个组件，其中包含用于以不同形式组合的相关字段。有时它属于FieldArray。一个字段的值必须影响另一个字段的显示。

在这种情况下是否有一种干净的方法来访问字段值？

const MyReusableFields = () => {
  return (
    <div>
      <Field
        component={TextField}
        name="fieldA"
      />
      {fieldA === 'something' && // How can he get fieldA's value here?
        <Field
          component={TextField}
          name="fieldB"
        />
      }
    </div>
  );
};

我认为我不能使用 formValueSelector 或 getFormValues，因为我不知道表格的名称。即使我知道表单的名称，我也不知道确切的字段名称，因为在 FieldArray 下它会有一个不可知的前缀。

我想象一些丑陋的代码通过状态搜索，但我更愿意使用框架支持的模式（如果存在）。

Answer 1

我想我大概已经在这里回答了你的问题https://github.com/erikras/redux-form/issues/3103#issuecomment-312556081

如果您正在创建一个 UI 小部件，其中有少量相互关联的字段字段可能是您想要的。

值得注意的是，您可以从 this.context._reduxForm.form 中注入表单名称 - 您可以创建一个 withFormName HOC 来包装连接并在连接中使用 ownProps.form 连接到 select 值您正在寻找。

在这之后，它就变成了你的架构问题......

例如，您似乎声明您不知道字段名称，因为您不知道字段所在的上下文。但是 fieldNames 是绝对的，除非您使用的是表单部分。例如，字段数组中名称为 "hello" 的字段会将其值存储在 store.form.formName.hello 下 - 而不是数组前缀值下 - 除非您将这些前缀传递给组件并手动添加前缀（这就是为什么 fields.map returns 字段名称).

关键是您通常必须预先知道这些名称，因为您是将它们指定给 Field/Fields 组件的人。如果您使用的是 FormSections，则所有三个组件都有一个 name 属性，该属性将 return 考虑到 FormSection 上下文的名称。

由于这些原因，我真的不明白为什么不能使用表单值 select 或字段来创建条件表单值填充。事实上，这些确实是您可以了解字段条件呈现值的唯一标准方法。

请注意，如果您使用字段，您将无法像处理条件字段渲染那样获得正确的 registering/deregistering，但这对您来说可能重要也可能不重要。

Answer 2

你必须使用 formValueSelector 表单 redux 表单。示例（在此示例中，模板字段仅在选中模板复选框时显示）：

import { reduxForm, Field, formValueSelector } from "redux-form";
import { connect } from "react-redux";

let UnitReduxForm = props => {
  const { handleSubmit, templateCheckboxActive } = props;

  return (
    <form onSubmit={handleSubmit}>
       <Field
          id="templateChecked"
          name="templateChecked"
          label="Unidad basada en plantilla"
          component={renderCheckboxField}
          type="checkbox"
        />
        {templateCheckboxActive && (
          <Field
            id="template"
            name="template"
            label="Plantilla"
            items={[
              { value: "cocina", label: "Plantilla Cocina" },
              { value: "bano", label: "Plantilla Baño" },
              { value: "sala", label: "Plantilla Sala" },
              { value: "comedor", label: "Plantilla Comedor" }
            ]}
            component={renderSelectField}
          />
        )}
    </form>
  )
}

//redux form
UnitReduxForm = reduxForm({ form: "unit" })(UnitReduxForm);
//selector
const selector = formValueSelector("unit");
UnitReduxForm = connect(state => {
  const templateCheckboxActive = selector(state, "templateChecked");
  return { templateCheckboxActive };
})(UnitReduxForm);

export default UnitReduxForm;

更多信息见：[https://redux-form.com/8.2.2/docs/api/formvalueselector.md/][1]

获取未知表单的 Redux 表单值

Get Redux Form Values For Unknown Form

javascript

jsx

reactjs

redux-form