1

所以，我很难弄清楚这一点。基本上我有一个与 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 将 setTeeth 更改为一个简单的变量。

4

3 回答 3

1

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

于 2022-02-28T18:01:57.997 回答
0

似乎你需要使用React.useCallabck()你的回调，特别是它是每个父重新渲染onSubmit的道具，你会得到一个新的函数引用，它会导致表单的重新渲染。FormonSubmit

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

于 2020-04-01T14:58:39.870 回答
0

表单将重新渲染，因为这就是 React 的工作方式 - 如果您更改组件的状态或道具，该组件将重新渲染。如果重新渲染对您的应用程序来说是个问题，请考虑将ConeBeam组件移动到父级中。

于 2020-04-01T14:56:07.080 回答