如何防止 react-final-form 呈现特定输入答案

【问题标题】：How to prevent react-final-form from rendering an specific input如何防止 react-final-form 呈现特定输入
【发布时间】：2021-12-31 11:55:30
【问题描述】：

我有一个 react-final-form 表单，它有 2 个输入。我们称它们为 from 和 to。

我想做的是，每当输入 from 发生变化时，我都会根据输入 from 的值为输入 to 设置一个值.

我在validate 函数中这样做，因为我不知道我还能在哪里做到这一点。它会导致在循环中重新渲染组件。

由于我在 validate 中将 的值更改为，它会导致 validate 函数一次又一次地运行。我怎样才能避免这种情况？

实际的代码比这复杂得多，但这是我遇到问题的地方。

谢谢

const validate = (v) => {
  const calculateFrom = calculate(v.from);

  window.setTo(calculateFrom);
};

<Form
  onSubmit={onSubmit}
  validate={validate}
  mutators={{
    setTo: (a, s, u) => {
      u.changeValue(s, 'to', () => a[0]);
    },
    setMax: (a, s, u) => {
      u.changeValue(s, 'from', () => getMaxBalance(selectedAsset1));
    },
  }}
  subscription={{ submitting: true, pristine: true }}
  render={({
    form,
    pristine,
    invalid,
    handleSubmit,
  }) => {
    if (!window.setTo) {
      window.setTo = form.mutators.setTo;
    }

    return (
      <form onSubmit={handleSubmit}>
<Field name="from">
  {({ input, meta }) => (
    <Input
      type="number"
      placeholder="123"
      size="input-medium"
      input={input}
      meta={meta}
    />
  )}
</Field>

<Field name="to">
  {({ input, meta }) => (
    <Input
      type="number"
      placeholder="123"
      size="input-medium"
      input={input}
      meta={meta}
    />
  )}
</Field>
/>

【问题讨论】：

标签： javascript reactjs react-final-form final-form

【解决方案1】：

首先你可以使用现有的装饰器 https://codesandbox.io/s/oq52p6v96y

我不太确定为什么它会无限地重新渲染。可能与重用您放在窗口上的函数 setTo 有关。

如果您不想添加该 mutator 库，我会尝试以下解决方案。在 Field 上使用 parse 道具，您可以在其中获取值并将其与您需要的其他值进行比较，并准确返回应检查的内容 example parse prop

最终表单允许在自定义组件中嵌套字段，因此您可以使用 useForm 挂钩

处理那里的所有内容

【讨论】：