使用 Formik 响应发布数据

Question

我是 react 初学者，想要一些关于 formik 表单帖子的建议。 我应该把什么传给 onSubmit？

import React from 'react';
import './style/App.css';
import {LoginForm } from "./login/LoginForm"

function App() {

  return <div style={{textAlign : "center"}}>
    <LoginForm onSubmit={({})=>{
      
    }} />
  </div>
}

export default App;

我也有这种方式的 LoginForm：

interface Values {
  username: string;
  password: string;
}

interface Props {
  onSubmit: (values: Values) => void;
}

export const LoginForm: React.FC<Props> = ({ onSubmit }) => {
  return (
    <Formik
      initialValues={{ username: "", password: "" }}
      onSubmit={values => {

      }}>

      {({ values }) => (
        <Form>
          <div>
            <Field
              name="username"
              placeholder="Username"
              component={MyField}
            />
          </div>
          <div>
            <Field
              type="password"
              name="password"
              placeholder="Password"
              component={MyField}
            />
          </div>
          <Button type="submit">submit</Button>
        </Form>
      )}
    </Formik>
  );
};

我通过需要将值传递给接口来发布。我不能在 LoginForm 中做到这一点。从这个意义上说，该组件将毫无用处。怎么做？

Answer 1

您只需传递处理值的函数，例如，使用“fetch”内置 JS 或“axios”包通过“post”或“get”请求向后端发送请求，

Formik 会将字段值发送到该函数（您传递给 OnSubmit 的那个），然后您根据需要处理它们。