用户提交表单后,如何防止React-Final-Form重置表单值?

时间:2019-12-26 22:15:03

标签: javascript reactjs forms react-final-form

我在React App中使用react-final-form。效果很好!

但是有什么方法可以防止react-final-form在用户成功提交表单后重置表单的输入值。

我之所以需要它,是因为当前在提交表单后重定向用户时,用户会看到在提交表单和重定向到其他组件之间,输入值被重置为200-400 micro second的初始表单值。

我尝试使用以下方法,但没有用:

  

e.preventDefault();

     

返回假;

以下是处理表单提交的功能。

export const useCreateAgent = (
  onCompleted: () => void,
) => {
  const [createAgent] = useMutation(CREATE_AGENT, {
    onCompleted,
  });

  return useCallback(async (agent: IAgent) => {
    try {
      await createAgent(createVariables({ ...agent }));
    } catch (errors) {
      return errors;
    }
  }, [createAgent]);
}

2 个答案:

答案 0 :(得分:1)

keepDirtyOnReinitialize属性修复了该问题。

<Form keepDirtyOnReinitialize >
   ...
</Form>

答案 1 :(得分:0)

如果只是有关提交和新页面之间外观的问题:

event.persist()阻止React重置事件对象。