Question

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

宁愿在下面放一个像carPrice这样的自定义问题，但不要采用其他方法也可以。有什么想法吗？这现在让我发疯。在ReactJS或Final Form的文档中未找到有关执行此操作的任何信息，或我所看到的其他地方。

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

我知道如何使用jQuery来做到这一点，但我真的很想进一步了解React。尤其是最终形式。

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

我需要做一个处理程序吗？当然有一种方法可以将其作为自定义道具添加到现场吗？

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

很久以来，我一直试图解决这个问题，所以我对解决方案视而不见。

<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

如果我正确理解要求：

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

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

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

您需要在Radio周围编写一个包装器组件，以将道具转换为所需的形状。您在使用material-ui吗？已经有一个库可以为您完成此操作：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时，其选中状态似乎存在问题。如您在此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字段

1 个答案: