React Formik 使用 Formik 中的 onSubmit 函数绑定外部按钮点击

React Formik 是一个用于处理表单的库，它提供了简洁易用的 API。其中，使用组件可以将表单的状态和验证逻辑与组件的状态进行绑定。在处理表单提交时，我们可以通过 onSubmit 函数来处理相关的逻辑。

在一些场景中，我们可能需要将外部按钮的点击事件与组件的 onSubmit 函数进行绑定，以实现更加灵活的交互。这种方式可以在用户点击按钮时主动触发表单的提交操作，而不是依赖于用户直接点击表单的提交按钮。

为了实现这个功能，我们可以按照以下步骤进行操作：

第一步，引入所需的依赖：

jsx
import React from 'react';
import { Formik, Form, Field } from 'formik';

第二步，在外部按钮的点击事件中调用表单的 submitForm 方法：

jsx
function App() {
  const formikRef = React.useRef(null);
  const handleButtonClick = () => {
    if (formikRef.current) {
      formikRef.current.submitForm();
    }
  };
  const handleSubmit = (values) => {
    // 在这里处理提交逻辑
    console.log(values);
  };
  return (
    
              initialValues={{ name: '' }}
        onSubmit={handleSubmit}
        innerRef={formikRef}
      >
        {(formik) => (
          
            
            
          
        )}
      
      
    
  );
}
export default App;

以上代码中，我们首先创建了一个 App 组件，并在组件内部定义了 handleButtonClick 和 handleSubmit 两个函数。handleButtonClick 函数用于处理外部按钮的点击事件，而 handleSubmit 函数用于处理表单的提交逻辑。

在组件的返回结果中，我们使用组件包裹了表单的内容，并通过 innerRef 属性将 formikRef 与组件进行了绑定。然后，在 handleButtonClick 函数中，我们通过 formikRef.current.submitForm() 调用了表单的 submitForm 方法，从而实现了外部按钮点击时的表单提交操作。

接下来，我们可以在 handleSubmit 函数中添加自定义的提交逻辑。例如，可以将表单的值打印到控制台上，或者发送请求等操作。

实例代码：

jsx
import React from 'react';
import { Formik, Form, Field } from 'formik';
function App() {
  const formikRef = React.useRef(null);
  const handleButtonClick = () => {
    if (formikRef.current) {
      formikRef.current.submitForm();
    }
  };
  const handleSubmit = (values) => {
    console.log(values);
  };
  return (
    
              initialValues={{ name: '' }}
        onSubmit={handleSubmit}
        innerRef={formikRef}
      >
        {(formik) => (
          
            
            
          
        )}
      
      
    
  );
}
export default App;

通过使用 React Formik 的 onSubmit 函数绑定外部按钮点击事件，我们可以实现更加灵活的表单交互。通过在外部按钮的点击事件中调用表单的 submitForm 方法，我们可以主动触发表单的提交操作，从而实现自定义的交互逻辑。这种方式可以在一些特定的场景中提供更好的用户体验和交互效果。

上一篇：React Formik 不适用于数字输入下一篇：React Formik 在 Formik 之外使用submitForm

=

React hook 中的 useEffect 第二个参数变化: 　　　　React是一种流行的JavaScript库，用于构建用户界面。它提供了一种名为"hook"的新特性，其中最常用的是`useEffect`。`useEffect`是一个React hook，用于处理组件的副作用操作...... ...
React hook useRef 不适用于样式组件和打字稿: 　　　　React hook useRef 是 React 中的一个重要概念，它用于在函数组件中保存和访问变量的引用。然而，有些情况下，我们需要注意不要滥用 useRef。具体来说，useRef 不适用于样式...... ...
React Hook useEffect 缺少依赖项：“list”: 　　　　在React开发中，我们经常会使用React Hook来管理组件的状态和副作用。其中，useEffect是一个非常常用的Hook，它可以在组件渲染完成后执行一些副作用操作。然而，在使用useE...... ...
React Hook useEffect 缺少依赖项：“dispatch”。包含它或删除依赖项数组react-hooksexhaustive-deps: 　　　　React Hook useEffect 缺少依赖项：“dispatch”。包含它或删除依赖项数组react-hooks/exhaustive-depsReact是一种用于构建用户界面的JavaScript库，它提供了一种声明式的方...... ...
React Hook useEffect 缺少依赖项：“dispatch”: 　　　　React Hook是React16.8版本引入的新特性，它可以让我们在函数组件中使用状态和其他React特性，而无需编写类组件。其中，useEffect是React Hook中非常常用的一个钩子函数，它...... ...
React Hook useEffect 缺少依赖项。包含它们或删除依赖项数组: 　　　　React Hook useEffect 是 React 中的一个钩子函数，用于在函数组件中执行副作用操作。副作用操作指的是那些不直接与渲染结果相关的操作，例如数据获取、订阅事件、手动修改...... ...
React hook useEffect 永远无限循环地持续运行: 　　　　React是一个流行的JavaScript库，用于构建用户界面。它使用组件的概念，将UI拆分为可重用的部分，并通过数据的变化来更新界面。为了更好地管理组件状态和副作用，React引入...... ...
React Hook useCallback 收到一个依赖项未知的函数。改为传递内联函数: 　　　　React Hook useCallback是React提供的一个用于优化性能的钩子函数。它用于返回一个记忆化的函数，以便在依赖项未改变的情况下，避免不必要的重新渲染。然而，有时候我们可能...... ...
React Hook useCallback 不更新状态值: 　　　　使用React Hook useCallback不更新状态值在React中，状态管理是非常重要的一部分。当状态发生变化时，组件通常会重新渲染。然而，有时候我们希望避免不必要的重新渲染，特别...... ...
React Hook Forms 如何使用 Typescript 将错误作为 props 传递: 　　　　React Hook Forms 是一个用于处理表单的库，它提供了一种简单且强大的方式来管理表单的状态和验证。它可以与Typescript无缝集成，使得表单的开发更加方便和可靠。本文将介绍...... ...
React hook Form 知道值何时被修改: 　　　　React Hook Form 是一个用于处理表单验证的库，它提供了一种简单且高效的方式来管理表单的状态和验证规则。使用 React Hook Form，我们可以轻松地定义表单字段、设置验证规...... ...
React Hook Form - 在不清除表单的情况下重置“isDirty”: 　　　　React Hook Form是一个用于处理表单的轻量级库，它提供了一种简洁而强大的方式来管理表单状态和验证。在使用React Hook Form时，我们经常会遇到需要重置表单状态的情况，比...... ...
React HOC（高阶组件）的 JSDoc 标签支持: 　　　　使用React HOC（高阶组件）的JSDoc标签支持React是一个流行的JavaScript库，用于构建用户界面。它通过使用组件的方式，将复杂的UI拆分成可重用的部分。而高阶组件（Higher-...... ...
React HOC 和 TypeScript 3.2: 　　　　使用React HOC和TypeScript 3.2进行开发React是一个流行的JavaScript库，用于构建用户界面。它采用了组件化的开发模式，使得代码可维护性和可重用性大大提高。在React中，H...... ...
React History.push() 不渲染新组件: 　　　　React 是一个流行的 JavaScript 库，用于构建用户界面。React 的核心思想是组件化，通过将 UI 拆分为独立的可复用的组件，可以更好地管理和维护大型应用程序。在 React 中，...... ...