reactjs - 在反应中单击输入字段时formik渲染元素?
问题描述
我正在尝试制作一个简单的登录表单,我想在单击输入字段时呈现一个元素。我通过将布尔变量的值更改为 true 来呈现元素,并且当用户触摸其他地方时写入输入时元素消失,我已经以正常的反应形式完成了此操作。一种切换的东西。但我不知道在formik中这样做。我的代码看起来像这样。
import React from "react";
import { Formik } from "formik";
import * as EmailValidator from "email-validator";
import * as Yup from "yup";
const ValidatedLoginForm = () => (
<Formik
initialValues={{ email: "", password: "" }}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
console.log("hello there ");
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required("Required"),
password: Yup.string()
.required("No password provided.")
.min(8, "Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/, "Password must contain a number.")
})}>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit
} = props;
return (
<div className="container">
<div className="row">
<form onSubmit={handleSubmit}>
<br />
<input
name="email"
type="text"
placeholder="Enter your email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
className={errors.email && touched.email && "error"}
/>
<br />
<br />
{errors.email && touched.email && (
<div className="input-feedback">{errors.email}</div>
)}
<br />
<input
name="password"
type="password"
placeholder="Enter your password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
className={errors.password && touched.password && "error"}
/> <br />
<br />
{errors.password && touched.password && (
<div className="input-feedback">{errors.password}</div>
)}
<button type="submit" disabled={isSubmitting}>
Login
</button>
</form>
</div>
<div className="row">
<button className="btn btn-default">Value</button>
</div>
</div>
);
}}
解决方案
也许这会对你有所帮助。尝试将函数添加到 onBlur 道具,然后处理 handleBlur 函数。
onBlur={(e) => {
handleBlur(e);
// here handle component showing
}}
推荐阅读
- scala - org.apache.spark.SparkException:无法在 300 秒内执行广播
- git - Git cvsimport 特定标签
- javascript - JavaScript Array 的这种行为是什么?
- angular - 我可以在 Ag-Grid 中为标题组添加浮动过滤器和复选框以选择所有行吗
- python - 计算txt文件中的字母
- rollupjs - Svelte 和 Rollup:如何导出可以通过 AJAX 获取、缓存并在多个页面上重用的组件?
- firebase - 为什么我无法创建 Google Analytics(分析)媒体资源视图?
- jquery - 如果没有更多元素,则 Jquery 水平滚动隐藏箭头
- python - 使用 numpy 时显示“列表超出范围”
- spring-boot - 为什么我的网络服务在使用 .hasIpAddress() 时禁止我的连接?