Обновление значений формы с помощью функций. {Реагируйте с withFormik} - PullRequest
Новая
       10

Обновление значений формы с помощью функций. {Реагируйте с withFormik}

1 голос
/ 06 января 2020

Я пытаюсь создать многостраничную форму с оператором switch, и у меня возникают проблемы с обновлением props.values.step, который я использую в качестве переменной оператора switch, с функцией, которую я продолжаю получать, "xyz is ошибка не приложена - это код, любая помощь будет большой и спасибо.

<-------------- Приложение. js ------------------> 

import React from "react";
import MyEnhancedForm from "./pages/FormHolder";

function App() {
  return (
    <div className="App">
      <MyEnhancedForm />
    </div>
  );
}

export default App;

<-------------- FormHolder. js ------------------> 

import Form from "./Form";
import { withFormik, Field } from "formik";
import * as Yup from "yup";
import VerifyPage from "./Verifypage";

const FormHolder = props => {
  function handleIncrease() {
    props.values.step += 1;
  }

  switch (props.values.step) {
    case 1:
      return <Form {...props} handleIncrease={handleIncrease} />;
    case 2:
      return <VerifyPage {...props} />;
    default:
      return null;
  }
};

const MyEnhancedForm = withFormik({
  mapPropsToValues: () => ({ step: 1, name: "" }),
  validationSchema: Yup.object().shape({
    name: Yup.string()
      .max(55, "Error: Name is too long.")
      .min(3, "Error: Name to short.")
  }),
  handleSubmit: () => {}
})(FormHolder);

export default MyEnhancedForm;

<----------- Форма. js ---------------> 

import React from "react";
import { Field } from "formik";
import { DisplayFormikState } from "./helper";
import { Card, FormGroup, Input, Label, Button } from "reactstrap";

const Form = (props, { handleIncrease }) => {
  const nextStep = e => {
    props.errors.name ? console.log(props.errors) : handleIncrease();
  };

  return (
    <Card>
      <FormGroup>
        <Label for="name"></Label>
        <Input
          tag={Field}
          bsSize="lg"
          type="text"
          name="name"
          id="name"
          component="input"
        />
        <Button type="submit" onClick={nextStep}>
          Next
        </Button>
        <DisplayFormikState {...props} />
      </FormGroup>
    </Card>
  );
};

export default Form;

<----- --------- VerifyPage. js ------------------>

Еще не попал на страницу подтверждения, поэтому вот почему на нем очень мало. 

import React from "react";
import * as Yup from "yup";
import { withFormik, Field } from "formik";
import { DisplayFormikState } from "./helper";
import { Card, FormGroup, Input, Label, Button } from "reactstrap";

const VerifyPage = props => {
  const prevStep = event => {
    event.preventDefault();
    props.handleDecrease();
  };
  return (
    <Card>
      Verify Page
      <DisplayFormikState {...props} />
    </Card>
  );
};

export default VerifyPage;

<-------------- помощник. js ------------ ------> 

<code>import React from "react";

export const DisplayFormikState = props => (
  <div style={{ margin: "1rem 0" }}>
    <h3 style={{ fontFamily: "monospace" }} />
    <pre
      style={{
        background: "#f6f8fa",
        fontSize: ".65rem",
        padding: ".5rem"
      }}
    >
      <strong>props</strong> = {JSON.stringify(props, null, 2)}
);

1 Ответ

1 голос
/ 06 января 2020

Ваша проблема в Form.js: 

const Form = (props, { handleIncrease }) => {
  const nextStep = e => {
    props.errors.name ? console.log(props.errors) : handleIncrease();
  };

handleIncrease - это реквизит, поэтому вы должны сделать что-то вроде этого: 

const Form = props => {
  const nextStep = e => {
    props.errors.name ? console.log(props.errors) : props.handleIncrease();
  };

Другая проблема: вы ' перевоплощение values.step, что вызовет дальнейшие проблемы (например, обновление не вызовет повторную визуализацию). Нет никакой реальной причины, чтобы Formik управлял step, поскольку это не входное значение формы. Вместо этого вы можете просто сохранить его в состоянии: 

const FormHolder = props => {
  const [step, setStep] = React.useState(1);

  function handleIncrease() {
    setStep(step => step + 1);
  }

  function handleDecrease() {
    setStep(step => step - 1);
  }
...