reactjs React Formik 在 <Formik /> 之外使用 submitForm
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49525057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Formik use submitForm outside <Formik />
提问by ssuhat
Current Behavior
当前行为
<Formik
isInitialValid
initialValues={{ first_name: 'Test', email: '[email protected]' }}
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>
);
}}
/>
I'm trying this solution https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770but it always return me Uncaught TypeError: _this.props.onSubmit is not a function
我正在尝试这个解决方案https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770但它总是让我返回Uncaught TypeError: _this.props.onSubmit is not a function
When I tried to console.log(this.form)there is submitFormfunction.
当我尝试console.log(this.form)有submitForm功能时。
Any solution guys?
各位大侠有什么解决办法吗？
- Formik Version: latest - React Version: v16 - OS: Mac OS
- Formik 版本：最新 - React 版本：v16 - 操作系统：Mac OS
采纳答案by ssuhat
found the culprit.
找到了罪魁祸首。
There are no longer onSubmitCallbackon Formik props. Should change it to onSubmit
不再有onSubmitCallbackFormik 道具。应该改成onSubmit
回答by Elise Chant
You can bind formikProps.submitForm(Formik's programatic submit) to a parent component and then trigger submission from the parent:
您可以将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;
回答by Eric Martin
Just for anyone wondering what's the solution via React hooks :
仅适用于想知道通过 React hooks 解决什么问题的人：
// Attach this to your <Formik>
const formRef = useRef()
const handleSubmit = () => {
if (formRef.current) {
formRef.current.handleSubmit()
}
}
// Render
<Formik innerRef={formRef} />
回答by Sebastian Patten
I built a hooks based example.
我构建了一个基于钩子的示例。
https://codesandbox.io/s/formik-submit-button-outside-form-d825u
https://codesandbox.io/s/formik-submit-button-outside-form-d825u
