- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Formik 在 React 中创建一个通用的联系表单。我正在从我的 api 获取数据并尝试调用 Formik 的 setStatus
生成一条消息,表明表单已成功提交。
无论出于何种原因 Status
状态永远不会更新以反射(reflect)我输入的内容 setStatus
.
这是我的代码:
import { Formik, Form, useField } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Button from "components/shared/button";
import "styles/contact/form.scss";
const handleSubmit = (values, actions) => {
axios.post("http://localhost:5000/sendemail/", values).then(res => {
actions.setSubmitting(false);
actions.setStatus = {
message: res.data.message
};
setTimeout(() => {
actions.resetForm();
}, 3000);
});
};
const FormField = ({ label, tagName, ...props }) => {
const [field, meta] = useField(props);
const errorClass = meta.touched && meta.error ? "error" : "";
const TagName = tagName;
return (
<>
<label htmlFor={props.id || props.name}>
{label}
{meta.touched && meta.error ? (
<span className="error">{meta.error}</span>
) : null}
</label>
<TagName
className={`form-control ${errorClass}`}
{...field}
{...props}
/>
</>
);
};
const ContactForm = () => (
<Formik
initialValues={{ name: "", email: "", msg: "" }}
validationSchema={Yup.object({
name: Yup.string().required("Required"),
email: Yup.string()
.email("Invalid email address")
.required("Required"),
msg: Yup.string().required("Required")
})}
onSubmit={handleSubmit}>
{({ isSubmitting, status }) => (
<Form className="contact-form">
<div className="row form-group">
<div className="col">
<FormField
label="Name"
name="name"
type="text"
tagName="input"
/>
</div>
<div className="col">
<FormField
label="Email"
name="email"
type="text"
tagName="input"
/>
</div>
</div>
<div className="form-group">
<FormField label="Message" name="msg" tagName="textarea" />
</div>
{status && status.message && (
<div className="message">{status.message}</div>
)}
<Button
id="formSubmit"
text="Send Message"
type="submit"
isSubmitting={isSubmitting}
/>
</Form>
)}
</Formik>
);
export default ContactForm;
就在我的提交按钮之前,它应该显示 <div class="message">Success message</div>
提交表格后。当我尝试调试 Status
的值时总是“未定义”。
有人知道我在这里做错了什么吗?
最佳答案
它不起作用的原因是因为我试图将 setStatus 的值设置为一个对象。我应该做的是将它用作方法并将对象作为参数传递。
像这样:
actions.setStatus({message: res.data.message});
这么久都没有犯这个简单的错误,我觉得自己很傻。
关于javascript - 为什么 Formik.setStatus 不更新我表单中的 Status 状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60349659/
我对文档有点困惑。请纠正我。 git 状态- 显示当前本地工作目录状态 git status -u- 显示未跟踪的文件(也是本地的) git 状态 -uno- 不显示未跟踪的文件(也是本地的)?? 后
我有一个具有 12 个虚拟机资源的 ARM 模板。每个虚拟机都有 1 个与其关联的 CustomLinuxScript 扩展资源。 某些 CustomLinuxScript 扩展失败并出现错误:状态文
我有一个具有 12 个虚拟机资源的 ARM 模板。每个虚拟机都有 1 个与其关联的 CustomLinuxScript 扩展资源。 某些 CustomLinuxScript 扩展失败并出现错误:状态文
我有以下 JavaScript 代码: alert(data.status); data 是一个 JSON 对象,其字段之一是 status ( bool 字段)。 当JSON.stringify(d
我在验证表单时遇到此错误,如何解决它。 代码: app.post('/',[ check('username','Error occured in Username').trim().isEmai
我正在开发一个使用 fork() exec() wait() 的 C 程序。第一个进程有以下代码: int main(int argc, const char * argv[]) { // inser
我想在 git status 上运行 linter,但是似乎没有 pre-status 和 post-status Hook 。 如何给 git 添加一个钩子(Hook)? fine docs对此事保
我需要获取所有 current_user.friends 状态,然后按 created_at 对它们进行排序。 class User a.created_at } end current_user.
我在 Eloquent 中使用 orWhere 时遇到问题。 我有一个团队,这个团队有一些资料。我想获取状态 = 1 或状态 = 2 的所有配置文件。但我无法让它工作。 我的代码是这样的: $prof
http://refspecs.linuxfoundation.org/LSB_5.0.0/LSB-Core-generic/LSB-Core-generic.html#INISCRPTACT 根据这
我们在 IIS 6.0 上托管 WCF 服务的服务器之一上观察到以下行为: IIS 日志显示所用时间的值较高 (> 100000) HTTP 状态码是 200 sc-win32-status 代码显示
在 Dynamics CRM 中,潜在客户实体同时具有状态和状态原因。使用 API 我可以获得所有状态原因。我被绊倒的地方是当我的用户选择状态原因时我想倒退并找出哪个状态与所选状态原因相关联。 以下是
我很好奇返回响应和仅创建响应的区别。 我见过大量使用 return res.status(xxx).json(x) 的代码示例和res.status(xxx).json(x) . 谁能详细解释一下两者
文档并没有真正说明 status 是什么。 status 到底是什么? http://man7.org/linux/man-pages/man2/exit_group.2.html 最佳答案 来自ex
An earlier question导致了一些关于如何检查 Git 存储库是否包含脏索引或未跟踪文件的想法。我从那次讨论中采纳的答案如下: #!/bin/sh exit $(git status -
ECSHOP出现 XMlHttpRequest status:[500] Unknow status 这个错误 把/admin/templates/top.htm 这个文件中{insert_scr
我有以下代码用于通过 Twitter4J 获取推文: List statuses; Paging paging = new Paging(1, LIMIT); statuses = twitter.g
非常不言自明。我正在制作一个脚本并且遇到了被使用和解析的情况,但它们的输出似乎总是完全相同。 最佳答案 git status --branch --porcelain "显示分支的状态(ahead,
我有一张表,上面有如下记录 表A subid clickid status datetime 1 123 low 2018-07-24 20:20:44 2 123
如果确实缺少资源,我的 API 将返回以下内容 { "code": 404, "message": "HTTP 404 Not Found" } 当我使用代码 Response.sta
我是一名优秀的程序员,十分优秀!