如何解析 react-final-form 中未触及的字段答案

【问题标题】：How to parse untouched fields in react-final-form如何解析 react-final-form 中未触及的字段
【发布时间】：2020-03-12 15:29:06
【问题描述】：

我输入了 react-final-form 中的金额。如果未填写，我需要将其表单值设置为零。我无法将初始值传递给它，就好像它没有被用户填充一样，输入本身应该保持为空。

在 react-final-form 文档中有一个 parse 函数。但它仅在该字段已被触摸（填充然后由用户清除）时才有效。有没有办法解析未触及的字段并将它们在表单值中设置为零，而不更新输入？

这是我的代码：

<Field
  name="amount"
  component={CurrencyInput}
  parse={value => (value ? value : 0)}
/>

这里是我的codesandbox的链接。

【问题讨论】：

【解决方案1】：

如果通过这样做您想要完成的是当输入为空时显示在<pre> 中的对象的默认值为零，您可以使用状态变量并在parse 中不断更新其值

  const [amount, setAmount] = useState(0);
  const onInputChange = e => {
    e === "" || e === undefined ? setAmount(0) : setAmount(e);
  };

在Field标签中

  <Field
    name="amount"
    component={CurrencyInput}
    parse={value => onInputChange(value)}
    defaultValue={amount}
    />

在此处检查代码框：

希望这能解决问题

【讨论】：