javascript - 使用函数更新表单值。{反应,withFormik}
问题描述
我正在尝试使用 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>
);
解决方案
您的问题出在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();
};
另一个问题:您正在 mutating values.step
,这将导致进一步的问题(例如,更新它不会导致重新渲染)。没有真正的理由让 Formik manage step
,因为它不是表单输入值。相反,您可以将其存储在 state 中:
const FormHolder = props => {
const [step, setStep] = React.useState(1);
function handleIncrease() {
setStep(step => step + 1);
}
function handleDecrease() {
setStep(step => step - 1);
}
推荐阅读
- sql-server - 使用存储过程插入多行
- python-3.x - 在 powershell 中简单查询 phpipam
- java - java agent Instrumented 类文件未反映在 PCF 上
- angular - ionic 4 - 如何为切换 div 设置动画
- python - 从列表列表创建数据框
- git - 与我的命令行相比,为什么 Visual Studio Code 显示更改的文件存在差异?
- html - 使用 Flex CSS 后立即在中间对齐一个项目和下一个项目
- mysql - 使用内连接从表 A 或表 B 中删除一行
- powerbi - 在 Power BI 中将下拉列表中的切片器值更改为每月到季度
- python - 为scrapy中的每个类别制作单独的输出文件