Question

我正在尝试使用switch语句制作多页表单，但在更新props.values.step（我用作switch语句变量的变量）时遇到了麻烦，并且我继续使用“ xyz不是一个函数”错误附加在代码中，对您的帮助将不胜感激，谢谢。

<-------------- App.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;

<----------- Form.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;

<-------------- helper.js ------------------>

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)}
    </pre>
  </div>
);

Answer 1

您的问题出在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);
  }

使用函数更新表单值。 {React，withFormik}

1 个答案: