如何使用Redux Forms訪問React中動態命名字段的值？

Question

這是我正在嘗試做的一些背景。 當用戶點擊添加行程時，我使用Redux Form Field Arrays來創建字段。

我面臨的問題是我希望字段數組中的表單根據用戶為行程類型選擇的選項（點對點，本地傳輸）進行更改。 因此，我在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

如果有人面臨同樣的問題，那么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 ，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