无法以形式传递适当的价值，做出反应

Question

我使用 Formiz 在 React 中创建了一个表单。但它没有发送正确的值。

这是一个有效的 CodeSandbox：https://codesandbox.io/s/formiz-pricing-wizard-forked-fcnsn?file=/src/fields/fieldradio.js

目前它正在向我发送这个值：

但它应该给我这个值：

我已经尝试从这里更改 step1.js：

const transformOptions = (options) =>
  options.map(({ subCategory, price, radioImage }, i) => ({
    label: <span>{subCategory}</span>,
    id: `${subCategory}-${i}`,
    value: `${price}`,
    image: radioImage
  }));

为此：

const transformOptions = (options) =>
  options.map(({ subCategory, price, radioImage }, i) => ({
    label: <span>{subCategory}</span>,
    id: `${subCategory}-${i}`,
    value: `${subCategory} - ${price}`,
    image: radioImage
  }));

它向我发送了正确的值，但是 MyForm.js 中的 totalPrice 函数停止工作：

const totalPrice = React.useMemo(() => {
    return categories.reduce(
      (total, c) =>
        total + (myForm.values[c] ? parseInt(myForm.values[c], 10) : 0),
      0
    );
  }, [myForm.values]);

谁能帮我解决一下？因为几个小时以来我一直在努力寻找解决方案，但仍然找不到解决方案，也无法解决问题所在！

Answer 1

由于您将 value 从 ${price} 修改为 ${subCategory} - ${price}，现在您的 totalPrice 已损坏，因为在 myForm.values[c] 中不再只有价格，还有子类别也。

要解决此问题，只需按以下方式修复您的 totalPrice：

  const totalPrice = React.useMemo(() => {

    return categories.reduce(
      (total, c) =>
        total +
        (myForm.values[c]?.split("-")[1]
          ? parseInt(myForm.values[c]?.split("-")[1], 10)
          : 0),
      0
    );
  }, [myForm.values]);

我用 myForm.values[c]?.split("-")[1] 替换了 myForm.values[c] 以便从 subCategory 部分“清理”value 并只留下 price.

Here 您的 codesandbox 已修改。

无法以形式传递适当的价值，做出反应

Can't pass proper value in form, react

javascript

reactjs

react-hooks