将自定义道具添加到具有 React Final Form 的单选组字段

Question

我正在做一个RadioGroup，据我了解，该值必须是一个字符串，但我想要一个数字，以便我可以用其他组件输入进行一些数学运算。

宁愿只有一个自定义概率，如下所示carPrice但如果没有其他方式就可以了。有什么想法吗？这让我现在发疯了。在 ReactJS 或最终形式的文档中没有找到任何关于这样做或我看过的其他任何地方的内容。

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

我知道如何使用jQuery做到这一点，但我真的很想更多地进入React。尤其是最终形式。

当然，最明显的事情是使用带有数字整数/浮点的值，但这会引发与受保护的"类型"必须是字符串相关的错误。

我是否需要制作处理程序以及哪种处理程序？当然有办法将其作为自定义道具添加到字段中吗？

我可以用jQuery做到这一点，但我真的很想坚持ReactJS和Final form。

长期以来一直在尝试解决这个问题，我对解决方案视而不见。

<RadioGroup row>
<FormControlLabel
label="Ford"
control={
<Field
name="Ford"
component={Radio}
type="radio"
defaultValue={0}
value={11}
//onClick={e => alert(e.target.value)}
//carPrice={555}
// value={`${55}`}
// value={888 ? String(yourValue) : null}
// props = {{ myPrice: 475 }}
/>
}
/>

Answer 1

如果我正确理解要求：

• 你想要一个具有不同汽车类型的无线电组
• 每辆车都有一个与之相关的价格值
• 您想使用存储在表单中的汽车价格进行其他计算

---

我认为问题的根源在于Radio组件需要具有不同形状的props，而不是react-final-form注入它们的形状。 React-final-from 道具看起来像这样(有关FieldRenderProps的更多信息，请点击此处(：

const { input, meta } = props;
const { name, onChange, value } = input;

您需要在 Radio 周围编写一个包装器组件，以将道具转换为所需的形状。 您是否正在使用材料用户界面？已经有一个库可以为您做到这一点：final-form-material-ui

一组包装器组件，便于将 Material-UI 与 Final 结合使用 形式。

---

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

所以这就是代码的样子：

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>

当单选按钮的值为number而不是string时，单选按钮的检查状态似乎存在问题。正如您在此代码沙箱示例中所看到的，表单值发生了变化，但单选按钮不会反映这一点。

---

更新的解决方案：

您可以将整个汽车对象(品牌和价格(存储在窗体状态中。

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

并使用format和parseFieldProps函数来实现工作检查状态并具有正确的表单状态值。

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

下面是工作代码沙箱示例。