React Formik 在 <Formik /> 之外使用 submitForm

Question

当前行为

<Formik
    isInitialValid
    initialValues={{ first_name: 'Test', email: '[e-mail]' }}
    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 OS

原文由 ssuhat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只是对于任何想知道通过 React hooks 的解决方案是什么的人：

Formik 2.x，如 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 。

TLDR ;如果您提交的组件是 <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} />

原文由 Eric Martin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将 formikProps.submitForm （Formik 的编程提交）绑定到父组件，然后触发父组件的提交：

 import React from 'react';
import { Formik } from 'formik';

class MyForm extends React.Component {
    render() {
        const { bindSubmitForm } = this.props;
        return (
            <Formik
                initialValues={{ a: '' }}
                onSubmit={(values, { setSubmitting }) => {
                    console.log({ values });
                    setSubmitting(false);
                }}
            >
                {(formikProps) => {
                    const { values, handleChange, handleBlur, handleSubmit } = formikProps;

                    // bind the submission handler remotely
                    bindSubmitForm(formikProps.submitForm);

                    return (
                        <form noValidate onSubmit={handleSubmit}>
                            <input type="text" name="a" value={values.a} onChange={handleChange} onBlur={handleBlur} />
                        </form>
                    )
                }}
            </Formik>
        )
    }
}

class MyApp extends React.Component {

    // will hold access to formikProps.submitForm, to trigger form submission outside of the form
    submitMyForm = null;

    handleSubmitMyForm = (e) => {
        if (this.submitMyForm) {
            this.submitMyForm(e);
        }
    };
    bindSubmitForm = (submitForm) => {
        this.submitMyForm = submitForm;
    };
    render() {
        return (
            <div>
                <button onClick={this.handleSubmitMyForm}>Submit from outside</button>
                <MyForm bindSubmitForm={this.bindSubmitForm} />
            </div>
        )
    }
}

export default MyApp;

原文由 Elise Chant 发布，翻译遵循 CC BY-SA 4.0 许可协议