React Final Form:有没有一种方法可以在组件更改后不重新呈现表单

Question

所以，我很难弄清楚这一点。基本上，我有一个与React Final Form无关的组件，但在Form标签中。主要的方法是，当用户单击按钮(在本例中为牙齿(时，其值会发生变化，并用紫色填充以显示是否单击了按钮，如果没有，则用白色填充。但当我填写表单并单击有牙齿的组件时，整个表单会重新渲染。有什么办法处理这种行为吗？也许我错了，这与我的自定义组件有关。

代码变得有点大，所以我将举例说明它是如何构建的：

<Form
initialValues={exam}
onSubmit={onSubmit}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
/*Custom component handling the teeth I mentioned*/
<ConeBeam onClick={toothClicked} color="white" data={teeth} />
/*TextField related to React-Final-Form using mui-rff*/
<TextField
label="Region"
name="clark_region"
size="small"
fullWidth
/>
</form>
)}
/>
/*toothClicked function*/
function toothClicked({ id }) {
const tooth = parseInt(id);
const el = document.getElementById(id);
if (!teeth.includes(tooth)) {
setTeeth([...teeth, tooth]);
el.setAttribute("class", classes.primary);
} else {
teeth.splice(teeth.indexOf(tooth), 1);
setTeeth([...teeth]);
el.setAttribute("class", classes.white);
}

}

已解决我使用useState，它会重新渲染以更改其状态。刚刚使用let将setTeethes更改为一个简单的变量。

Answer 1

您可以使用Form propinitialValuesEqual。例如：initialValuesEqual={() => true}

Answer 2

表单将重新提交，因为React就是这样工作的——如果您更改组件的状态或道具，组件将重新提交。如果重新提交程序对您的应用程序有问题，请考虑将ConeBeam组件移动到父组件中。

Answer 3

您的回调似乎需要使用React.useCallabck()，尤其是onSubmit，它是Form的道具，因此在每次父级重新渲染时，您的onSubmit都会获得一个新的函数引用，从而导致Form的重新渲染。

const Parent = () => {
const onSubmit = React.useCallback(() => {
// do your submit logic here
});
return (
<Form onSubmit={onSubmit} ... />
);
}