reactjs - 在 formik 组件之外处理 formik 表单

Question

我有一个 formik 表单如下。我能够在 formik 组件中提交表单。但是我怎么能在 formik 组件之外提交它(对于这个例子来说是在页脚按钮内)。

Formik 网址:Click here

特别是，我如何在 Formik 组件之外访问此值 handleChange, values, handleSubmit, errors,isValid,touched, handleBlur, isSubmitting,。

我在 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>

Answer 1

我在创建可重复使用的弹出窗口时遇到了同样的问题，并且在弹出窗口模板中有保存按钮，在弹出窗口内容中有 formik 表单(所以我无法将按钮放在表单中，因为页脚在任何弹出窗口中都被重复使用).

我通过向表单中的提交按钮添加一个 ref 并使用 css 隐藏该按钮然后在单击所需的提交按钮时实用地触发对隐藏的提交按钮的单击来解决它。

也许不是最干净的解决方案，但它对我有用。

这是一个基本示例

<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>

希望对你有帮助