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

Question

我正在尝试使用 switch 语句制作多页表单，但在更新 props.values.step 时遇到问题，我将其用作我的 switch 语句变量，我继续获得“xyz is不是函数”错误附加的代码任何帮助都会很棒，谢谢。

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

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

export default App;

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;

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;

还没有进入验证页面，所以上面的内容很少。

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;

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，因为它不是表单输入值。相反，您可以将其存储在 state 中：

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

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

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