如何使用 Formik 应用突变？

Question

我一直在想办法实现react-apollo <Mutation>组件的提交功能。在那里找到了一些对于这个简单任务来说似乎有点矫枉过正的例子，包括this和this。由于我是刚开始学习 React 的新程序员，更不用说 Formik 甚至 HOC（我想这是要走的路？），我无法真正理解这些示例以及如何使它们适应我的模拟Hello world代码。

这是我的注册表单：

import React, { Component } from "react";
import { withFormik, Form, Field } from "formik";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";

const CREATE_USER_MUTATION = gql`
  mutation CREATE_USER_MUTATION(
    $name: String!
    $email: String!
    $password: String!
  ) {
    signup(name: $name, email: $email, password: $password) {
      id
      name
      email
      password
      permissions
    }
  }
`;

class App extends Component {
  state = {
    name: "",
    email: "",
    password: ""
  };
  render() {
    return (
      <Mutation mutation={CREATE_USER_MUTATION}>
        {(signup,{loading}) => (
          <Form>
            <Field type="text" name="name" placeholder="Name" />
            <Field type="email" name="email" placeholder="Email" />
            <Field type="password" name="password" placeholder="Password" />
            <button type="submit" disabled={loading}>
              Sign Up
            </button>
          </Form>
        )}
      </Mutation>
    );
  }
}

const SignupPage = withFormik({
  mapPropsToValues() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  handleSubmit() { ... }
})(App);

export default SignupPage;

如何访问signup的handleSubmit？

Answer 1

使用HOC<Formik />会是更好的方法withFormik()。

由于<Formik />在内部<Mutation/>（而不是相反），您可以在 onSubmit 字段中调用您的突变。

https://jaredpalmer.com/formik/docs/api/formik

<Mutation mutation={CREATE_USER_MUTATION}>
    {(signup,{loading}) => (

        <Formik
            initialValues={{ name: '', email: '', password: '' }}
            onSubmit={ async (values, actions) => {
                // You can access the signup mutation in here now
                // You can access values.name, values.email, values.password
                // You can access actions, e.g. actions.setSubmitting(false) once you've finished the mutation
            }}


            render={props => (

                <Form onSubmit={props.handleSubmit}>
                    <Field 
                        type="text"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.name} 
                        name="name" 
                        placeholder="Name" 
                    />
                    <Field 
                        type="email"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.email} 
                        name="email" 
                        placeholder="Email" 
                    />
                    <Field 
                        type="password"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.email} 
                        name="password" 
                        placeholder="Password" 
                    />
                    <button type="submit" disabled={loading}> Sign Up </button>
                </Form>
            )}
        />
    )}
</Mutation>