reactjs - React Formik 在之外使用submitForm

Question

当前行为

<Formik
    isInitialValid
    initialValues={{ first_name: 'Test', email: 'test@mail.com' }}
    validate={validate}
    ref={node => (this.form = node)}
    onSubmitCallback={this.onSubmitCallback}
    render={formProps => {
        const fieldProps = { formProps, margin: 'normal', fullWidth: true, };
        const {values} = formProps;
        return (
            <Fragment>
                <form noValidate>
                    <TextField
                        {...fieldProps}
                        required
                        autoFocus
                        value={values.first_name}
                        type="text"
                        name="first_name"

                    />

                    <TextField
                        {...fieldProps}
                        name="last_name"
                        type="text"
                    />

                    <TextField
                        {...fieldProps}
                        required
                        name="email"
                        type="email"
                        value={values.email}

                    />
                </form>
                <Button onClick={this.onClick}>Login</Button>
            </Fragment>
        );
    }}
/>

我正在尝试这个解决方案 https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770但它总是返回给我 Uncaught TypeError: _this.props.onSubmit is not a function

当我尝试 console.log(this.form) 时，有 submitForm 函数。

大家有什么解决办法吗？

<小时/>

- Formik 版本:最新- react 版本:v16- 操作系统:Mac操作系统

Answer 1

对于那些想知道通过 React hooks 解决方案的人来说:

Formik 2.x, as explained in this answer

// import this in the related component
import { useFormikContext } from 'formik';

// Then inside the component body
const { submitForm } = useFormikContext();

const handleSubmit = () => {
  submitForm();
}

请记住，该解决方案仅适用于 Formik 组件内部的组件，因为它使用上下文 API。如果出于某种原因您想从外部组件或实际使用 Formik 的组件手动提交，您实际上仍然可以使用 innerRef Prop 。

太长了；如果您提交的组件是 <Formik> 的子组件，则此上下文答案就像一个魅力。或withFormik()组件，否则，使用 innerRef答案如下。

Formik 1.5.x+

// Attach this to your <Formik>
const formRef = useRef()

const handleSubmit = () => {
  if (formRef.current) {
    formRef.current.handleSubmit()
  }
}

// Render
<Formik innerRef={formRef} />