[英]Handle formik form outside of formik component
I have a formik
form as follow.我有一个
formik
表格如下。 I am able to submit the form inside formik component.我可以在 formik 组件中提交表单。 But how could i submit it outside of formik component (inside footer button for this example).
但是我怎么能在 formik 组件之外提交它(在这个例子中的页脚按钮内)。
Formik url: Click here Formik 网址:点击这里
Particulary, how could i access this values handleChange, values, handleSubmit, errors,isValid,touched, handleBlur, isSubmitting,
outside of Formik
component.特别是,我如何在
Formik
组件之外访问这些值handleChange, values, handleSubmit, errors,isValid,touched, handleBlur, isSubmitting,
。
I am doing it in react-native
but i guess concept of react would help, particularly with the usage of useRef
etc. Found few examples online using ref but none of it work.我是在
react-native
做的,但我想 react 的概念会有所帮助,特别是使用useRef
等。在网上找到了几个使用 ref 的例子,但没有一个工作。
<View>
<Formik
onSubmit={async values => {
this.handleSubmit(values);
await new Promise(resolve => setTimeout(resolve, 1000));
console.warn(values);
}}
validationSchema={validationSchema}>
{({
handleChange,
values,
handleSubmit,
errors,
isValid,
touched,
handleBlur,
isSubmitting,
}) => (
<View>
<Form>
<Text>First Name</Text>
<TextInput
name="first_name"
value={values.first_name}
onChangeText={handleChange('first_name')}
/>
{errors.first_name ? (
<Text>{errors.first_name}</Text>/>
) : (
<></>
)}
<Button onPress={handleSubmit}>
<Text>Submit</Text>
</Button>
</Form>
</View>
)}
</Formik>
<Footer>
<Button>Submit</Button>
</Footer>
</View>
I had the same issue when creating a reusable popup and having the save button in the popup template and the formik form in the popup content (so I was unable to put the button inside the form since the footer was reused in any popup).在创建可重复使用的弹出窗口并在弹出模板中包含保存按钮并在弹出内容中包含 formik 表单时,我遇到了同样的问题(因此我无法将按钮放在表单中,因为页脚在任何弹出窗口中重复使用)。
I solved it by adding a ref to the submit button in the form and hiding the button with css and then triggering a click on the hidden submit button pragmatically when clicking on the desired submit button.我通过向表单中的提交按钮添加 ref 并用 css 隐藏按钮,然后在单击所需的提交按钮时实际触发对隐藏提交按钮的单击来解决它。
Maybe not the cleanest solution but it worked for me.也许不是最干净的解决方案,但它对我有用。
Here is a basic sample这是一个基本示例
<Formik>
....
<Field>
<Field>
...
<button type="submit" style={{display:"none"}} ref={this.submitButton}/>
</Formik>
<div className="ftr">
<button onClick={() => this.submitButton.current.click()}>Save</button>
</div>
Hope this helps希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.