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

Question

我正在制作一个 RadioGroup，据我所知，该值必须是一个字符串，但我想要一个数字，以便我可以对其他组件输入进行一些数学计算。

宁愿像下面的 carPrice 这样的自定义概率，但如果失败，其他方法也可以。有什么想法吗？这让我发疯了。在 ReactJS 或 Final Form 的文档中或我看过的任何其他地方都没有找到任何关于这样做的内容。

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

我知道如何用 jQuery 做到这一点，但我真的很想深入了解 React。特别是最终形式。

当然，最明显的事情是使用带有数字 integer/float 的值，但这会引发与受保护 'type' 必须是字符串相关的错误。

我需要做一个处理程序吗？什么样的？肯定有办法将它作为自定义道具添加到字段中吗？

我可以用 jQuery 做到这一点，但我真的想坚持使用 ReactJS 和最终形式。

长期以来一直在努力解决这个问题，我对解决方案的代码视而不见。

<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={``}
        // value={888 ? String(yourValue) : null}
        // props = {{ myPrice: 475 }}

      />
    }
  />

Answer 1

如果我理解正确的话：

你想要一个 RadioGroup，有不同的车型
每辆车都有与之关联的价格值
您想使用表格中存储的汽车价格进行其他计算

我认为问题的根源在于 Radio 组件需要 props 具有 不同的形状 ，而不是 react-final-form 的形状] 正在注射它们。 react-final-from 道具看起来像这样（有关 FieldRenderProps here 的更多信息）：

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

您需要围绕 Radio 编写一个包装器组件，以将道具转换为所需的形状。你在使用 material-ui? There is already a library that will do that for you: final-form-material-ui

A set of wrapper components to facilitate using Material-UI with Final Form.

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

~~代码如下所示：~~

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 时，单选按钮的选中状态似乎有问题。正如您在此 codesandbox example 中看到的，表单值发生了变化，但单选按钮并未反映这一点。

更新的解决方案：

您可以在表单状态中存储整个汽车对象（品牌和价格）。

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

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

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

这是工作 codesandbox example。

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

Adding custom prop to RadioGroup field with React Final Form

radio-group

reactjs

react-props

react-final-form