reactjs - 使用 formik 在表单中进行 onchange 字段的值不会更新
问题描述
我是新手,我正在尝试将验证应用于表单。
由于某种原因,添加属性时:
onChange={onChange}
我想将值发送到父组件。这就是我使用 onchange 的原因。
我的文本字段中没有显示我写的任何内容,为什么会发生这种情况?
export const Son = props => {
const { onChange } = props;
return (
<Formik
initialValues={{
fullname: "",
email: ""
}}
validationSchema={Yup.object().shape({
fullname: Yup.string()
.min(2, "Your name is too short")
.required("Please enter your full name"),
email: Yup.string()
.email("The email is incorrect")
.required("Please enter your email")
})}
onSubmit={(values, { setSubmitting }) => {
const timeOut = setTimeout(() => {
console.log(values);
setSubmitting(false);
clearTimeout(timeOut);
}, 1000);
}}
>
{({
values,
errors,
touched,
handleSubmit,
isSubmitting,
validating,
valid
}) => {
return (
<Form name="contact" method="post" onSubmit={handleSubmit}>
<label htmlFor="fullname">
Fullname
<Field
type="text"
name="fullname"
autoComplete="name"
placeholder="your fullname"
onChange={onChange}
/>
</label>
{<ErrorMessage name="fullname">{msg => <p>{msg}</p>}</ErrorMessage>}
{/*errors.fullname && touched.fullname && <p>{errors.fullname}</p>*/}
<br />
<label htmlFor="email">
Email
<Field
type="email"
name="email"
autoComplete="email"
placeholder="your email"
onChange={onChange}
/>
</label>
<ErrorMessage name="email">{msg => <p>{msg}</p>}</ErrorMessage>
<br />
<button type="submit" disabled={!valid || isSubmitting}>
{isSubmitting ? `Submiting...` : `Submit`}
</button>
</Form>
);
}}
</Formik>
);
};
这是我的实时代码:
https://stackblitz.com/edit/react-qotvwb?file=components/son_component.js
解决方案
推荐阅读
- python - 在多处理连接后打印全局变量
- python - numpy.format 似乎只是四舍五入到一个整数
- heroku - Heroku 上的 Lua MVC 框架
- python - 正则表达式 python 中的文本字符串并拆分为数组
- c# - C#.NET 和解析来自服务器的 XML 响应
- scala - 带过滤器的 HBASE SPARK 查询不加载所有 hbase
- java - 当泛型类型具有继承结构时,如何在 Mapstruct 中映射集合?
- android - Android 网络服务发现获取主机名 (mDNS/Zeroconf)
- avfoundation - CVMetalTextureCacheCreate & 三重缓冲
- hive - Nifi PutHive3Streaming - 写入分区表