React Final Form - 單選按鈕在 FieldArray 中不起作用

Question

我有使用 FieldArray 動態呈現的單選按鈕組。

<FieldArray name="customers">
    {({ fields }) =>
    fields.map((name, index) => (
        <div key={name}>
        <label>Cust. #{index + 1}</label>
        <label>
            <Field
                name="picked"
                component="input"
                type="radio"
                value={index + 100}
            />{" "}
            Pick {index + 100}
        </label>

單擊單選按鈕會更新表單值，但未在 UI 中選擇該按鈕。 我很好奇這里缺少什么。

{
  "customers": [
    {
      "firstName": "first_name_1",
      "lastName": "last_name_1"
    },
    {
      "firstName": "first_name_2",
      "lastName": "last_name_2"
    }
  ],
  "picked": "101"
}

完整代碼在這里： https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-r7uz8y?file=/index.js:1482-1995

示例基於https://final-form.org/docs/react-final-form/examples#field-arrays

感謝您的觀看！

Answer 1

我讀過文檔說值可以是任何變量。 但我測試了一個字符串值（例如： <Field name="radio" type="radio" value="no" component="input" />No 。它正在工作。所以如果你添加了一個 integer 值，它' d not work expected. 如果你用這個value={JSON.stringify(index + 100)}轉換它會起作用。

https://codesandbox.io/s/react-final-form-field-arrays-with-radio-group-forked-41lwoc

Answer 2

@ht13 給個解決辦法，不錯。 我想說渲染后的值應該是“string”。 您可以將值作為 integer 傳遞。實際上，瀏覽器應該顯示錯誤，但有時它會修復或識別它。