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

Question

这里是关于我正在尝试做的事情的一些背景知识。当用户点击添加行程时，我正在使用 Redux Form Field Arrays 创建字段。

我面临的问题是我希望字段数组中的表单根据用户为旅行类型（点对点、本地交通）选择的选项进行更改。因此，我遵循了 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

使用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

Answer 2

如果有人遇到同样的问题，请参考 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
)}

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

How to access a value of a dynamically named field in React using Redux Forms?

javascript

reactjs

redux

redux-form

react-redux