使用最终形式计算器清除文本字段值

问题描述

我正在尝试使用 final-form 计算器在另一个字段发生变化时清除一个字段。

In my example，我有两个字段。每当第一个字段发生变化时，第二个字段就会被清除。这是意料之中的。

但是，重新渲染表单的父组件时会出现问题。每次父组件调用它的渲染函数时，即使第一个字段没有改变，第二个字段也会被清除。这可以通过点击顶部的 forceUpdate 按钮来观察。

是否可以防止第二个字段像这样清除？最好不使用 shouldComponentUpdate

解决方法

我已经能够通过将装饰器数组移到组件之外来解决它。

const decorators = [calculator]; // declared outside of App

并引用表单 props 中的值

<Form
  decorators={decorators}
  ...