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来包装connect并在connect中使用ownProps.form来选择您正在寻找的值对于。

在此之后，它成为您的架构问题......

例如，您似乎声明您不了解字段名称，因为您不知道字段的上下文。但是fieldNames是绝对的，除非您使用表单部分。例如，名为＆＃34; hello＆＃34;的字段在一个字段数组中将它存储在store.form.formName.hello下的值 - 不在数组前缀值下 - 除非你将这些前缀传递给组件并手动执行前缀（这就是为什么字段。 map返回字段名称。）。

重点是您通常必须事先知道名称，因为您是指定字段/字段组件的名称。如果您正在使用FormSections，则所有三个组件都有一个名称prop，它将返回考虑FormSection上下文的名称。

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

请注意，如果您使用字段，则无法按照条件字段呈现的方式进行正确的注册/取消注册，但这可能对您有用，也可能无关紧要。

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表单值

2 个答案: