如何在React项目中导入Formik？附相关组件代码片段

1. 先安装Formik #

执行终端命令完成安装：
npm install formik
或者用yarn的话：
yarn add formik

2. 在组件中导入并使用 #

修改你提供的代码片段，添加Formik的导入和基础用法：

import './App.css';
// 按需导入Formik相关组件
import { Formik, Form, Field } from 'formik';

function App() {
  return (
    <>
      <div className='container'>
        <Formik
          // 设置表单初始值
          initialValues={{ username: '', password: '' }}
          // 处理表单提交逻辑
          onSubmit={(values) => {
            console.log('提交的表单数据：', values);
          }}
        >
          <Form>
            <Field type="text" name="username" placeholder="用户名" />
            <Field type="password" name="password" placeholder="密码" />
            <button type="submit">提交</button>
          </Form>
        </Formik>
      </div>
    </>
  );
}

export default App;

额外说明 #

• 如果你只需要基础表单功能，导入Formik和Form就够了；需要表单字段或错误提示的话，再导入Field、ErrorMessage等
• initialValues是必填项，用来定义表单各个字段的初始状态
• 提交表单时，onSubmit会接收当前表单的所有值作为参数

提示：如果导入时报错，先检查Formik是否安装成功，或者确认你的React项目环境正常

内容的提问来源于stack exchange，提问作者Nihat Gahramanli