如何防止 react-final-form 呈現特定輸入

Question

我有一個react-final-form表單，它有 2 個輸入。 讓我們調用它們from和to 。

我想要做的是，每當輸入更改時，我都會根據輸入的值設置輸入值。

我這樣做是為了validate function 因為我不知道我還能在哪里做到這一點。 它會導致在循環中重新渲染組件。

由於我在驗證中將值更改為，它會導致驗證function 一次又一次地運行。 我怎樣才能避免這種情況？

實際代碼比這復雜得多，但這是我遇到問題的地方。

謝謝

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>
/>

Answer 1

首先，您可以使用現有的裝飾器https://codesandbox.io/s/oq52p6v96y

我不太確定為什么它會無限地重新渲染。 可能與重用 window 上的 function setTo 有關。

如果您不想添加該 mutator 庫，我會嘗試以下解決方案。 在字段上使用解析道具，您可以在其中獲取值並將其與您需要的其他值進行比較，並准確返回應該檢查附加的示例解析道具

最終表單允許將字段嵌套在自定義組件中，因此您可以使用useForm鈎子處理那里的所有內容