Реагируйте на собственную многостраничную форму с Formik, передавая реквизиты компоненту - PullRequest
Новая
       12

Реагируйте на собственную многостраничную форму с Formik, передавая реквизиты компоненту

0 голосов
/ 18 ноября 2018

Я пытаюсь создать многостраничную форму, используя Formik и React Native

Используя подход состояния и массива, я могу рендерить несколько страниц.Однако, чтобы использовать formik, мне нужно передать реквизиты моему компоненту, а именно Page1, Page2, Page3

У кого-то есть идеи, как этого достичь?

Я пытаюсь передать реквизиты внизв Page1.js для использования props.handleChange, props.handBlur, props.values ​​.... с Formik

Заранее спасибо

WizardScreen.js 

import React, { Component } from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { Button } from "react-native-elements";
import { Formik } from "formik";

import Input from "./Input";
import { Page1 } from "./Page1";
import { Page2 } from "./Page2";
import { Page3 } from "./Page3";

const pages = [<Page1 />, <Page2 />, <Page3 />];
class WizardScreen extends Component {
  state = {
    page: 0
  };

  _handleSubmit = async (values, bag) => {
    try {
      console.log(values);
    } catch (error) {
      bag.setSubmitting(false);
      bag.setErrors(error);
    }
  };

  _nextPage = () => {
    this.setState(state => ({ page: state.page + 1 }));
  };

  render() {
    const { container, buttonStyle } = styles;

    return (
      <Formik
        initialValues={{ name: "", email: "", info: "" }}
        onSubmit={values => console.log(values)}
      >
        {props => (
          <View style={container}>
            {pages[this.state.page]}
            <TextInput
              placeholder="Input"
              onChangeText={props.handleChange("email")}
              onBlur={props.handleBlur("email")}
              value={props.values.email}
            />
            {this.state.page === pages.length - 1 ? (
              <Button
                style={buttonStyle}
                onPress={props.handleSubmit}
                title="Submit"
              />
            ) : (
              <Button
                title="Next Page"
                style={buttonStyle}
                onPress={this._nextPage}
              />
            )}
          </View>
        )}
      </Formik>
    );
  }
}

Page1.js 

import React from "react";
import { Text } from "react-native";

export const Page1 = props => {
  console.log(props);
  return (
    <React.Fragment>
      <Text>Page 1</Text>
    </React.Fragment>
  );
};
...