Question

以下是我正在尝试做的一些背景知识。当用户点击添加旅行时，我使用Redux表单字段数组来创建字段。

我面临的问题是我希望字段数组中的表单根据用户为行程类型选择的选项（点对点，本地传输）进行更改。所以，我关注了Selecting Form Values的Redux Form API网站的示例。这对我不起作用，因为字段名称是动态的，我不知道如何使用动态字段名称来执行此操作。这是我试过的代码，任何帮助将不胜感激。谢谢！

服务类型单选按钮代码：

<fieldset className="row">
   <div className="col">
      <Field name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Point" id="trip1_choice1"/>
      <label htmlFor="trip1_choice1">
      Point-to-Point
      </label>
   </div>
   <div className="col">
      <Field name={`${member}.serviceType`}  className="with-gap" component="input" type="radio" value="Local" id="trip1_choice2" />
      <label htmlFor="trip1_choice2">
      Local Transport
      </label>
   </div>
</fieldset>

根据选择的单选按钮更改表单的代码：

{[`${member}.serviceType`] === "Point" &&
  //HTML Form Code goes here
}

正如您所看到的，我在访问动态字段数组的值时遇到了问题。 [${member}.serviceType]不起作用。

Answer 1

如果有人面临同样的问题，那么example on github应如何处理。

以下是我实施的代码。这显示了我如何获得特定值，并且还显示了如何获取动态表单的所有值。

// Get values from form
const selector2 = getFormValues('wizard');
const selector = formValueSelector("wizard");
Member = connect((state, props) => ({
  serviceTypeDyno: selector(state, `${props.member}.serviceType`),
  formValuesDyno: selector2(state)
}))(Member);

if语句将是：

{serviceTypeDyno === "Point" && (
  //HTML Form Code goes here
)}

如果你正在使用getFormValues选择器：

{formValuesDyno.serviceType === "Point" && (
  //HTML Form Code goes here
)}

Answer 2

使用ref's，ejem。

<Field ref='fieldName' name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Point" id="trip1_choice1"/>

要访问它们，请使用：this.refs.fieldName.getRenderedComponent().refs.input

在redux-form存储库

上检查此问题#1933

如何使用Redux Forms访问React中动态命名字段的值？

2 个答案: