Reactjs 使用React Final Form将自定义道具添加到RadioGroup字段

我正在制作一个

RadioGroup

，据我所知，该值必须是一个字符串，但我需要一个数字，这样我就可以对其他组件输入进行计算

我更希望有一个定制的问题，比如下面的

carPrice

，但如果没有其他方法就可以了。有什么想法吗？这让我快发疯了。在ReactJS文档或最终表单中没有找到任何关于执行此操作的内容，也没有在我查找过的任何其他地方找到任何内容

注释行只是我尝试过的一些例子，但还有更多

我知道如何使用jQuery实现这一点，但我真的很想更多地使用React。尤其是最后的形式

当然，最明显的是将值与数字整数/浮点一起使用，但这会引发与受保护的“类型”必须是字符串相关的错误

我需要做一个什么样的训练员吗？当然有办法将其作为自定义道具添加到场地中吗

我可以用jQuery实现这一点，但我真的想坚持使用ReactJS和Final表单

这么长时间以来我一直在努力解决这个问题，现在我对解决方案的代码盲了

}
/>

如果我正确理解要求：

• 你想要一个不同车型的放射组
• 每辆车都有与其关联的价格值
• 您希望使用表单中存储的汽车价格进行其他计算

---

我认为问题的根源在于，

无线电

组件需要

道具

具有不同形状，而不是以

反应最终形式

注射它们。 道具的最终反应如下（有关

FieldRenderProps

的更多信息）：

您需要在Radio周围编写一个包装器组件，以将道具转换为所需的形状。 你在用什么？已经有一个库可以为您执行此操作：

一组包装器组件，以便于在最终 形式

---

更新：下面的代码段工作不正常。滚动到更新的答案

这就是代码的样子：

并使用

格式

和

解析

字段属性

功能实现工作检查状态并具有正确的表单状态值

<FormControlLabel
  label={"Ford"}
  control={
    <Field
      name="car"
      format={car => car.brand}
      parse={() => ({ brand: "Ford", price: 475 })}
      component={Radio}
      type="radio"
      value={"Ford"}
    />
  }
/>

（{品牌：“福特”，价格：475}）
组件={Radio}
type=“无线电”
值={“Ford”}
/>
}
/>

---

以下是工作原理。

您好，我不熟悉您使用的依赖项，但是我知道库语义用户界面使用值作为数字（值可以是任何值：字符串、布尔、数字等）：我不知道是否有任何帮助，但若你们的问题并没有解决办法，那个么这可能是一条出路——你们是完全正确的。真令人印象深刻，兄弟。RFF的创建者Erik告诉我它与解析有关，但我找不到一个好的例子。现在我已经在值中使用了JSON，我的朋友也这样做了，但稍后我会用这个来更新它。非常感谢你。

import { FormControlLabel, RadioGroup } from '@material-ui/core';
import { Radio } from 'final-form-material-ui';
import { Field } from 'react-final-form';

// ...

    <RadioGroup row>
        <FormControlLabel
          label="Ford"
          control={<Field name="carPrice" component={Radio} type="radio" value={475} />}
        />
        <FormControlLabel
          label="Mercedes"
          control={<Field name="carPrice" component={Radio} type="radio" value={555} />}
        />
    </RadioGroup>

<Form
  initialValues={{ car: { brand: 'Ford', price: 475 } }}
  // ...

<FormControlLabel
  label={"Ford"}
  control={
    <Field
      name="car"
      format={car => car.brand}
      parse={() => ({ brand: "Ford", price: 475 })}
      component={Radio}
      type="radio"
      value={"Ford"}
    />
  }
/>