如何使用 antd 和 formik 设置和获取日期选择器值? [英] How to set and get a datepicker value using antd with formik?
问题描述
这里我用 antd 创建 Datepicker 并将这个 antd datepicker 传递给 formik 字段.我的 Datepicker 和 antd 示例代码
import React from "react";从antd"导入 { Form, DatePicker }从formik"导入{字段}；从时刻"导入时刻；const FormItem = Form.Item;函数 onChange(date, dateString) {控制台日志(日期，日期字符串)；}const dateFormat = "MM-DD-YYYY"//这里我通过DateInput添加antd错误信息常量日期输入 = ({场地，形式:{接触，错误}，...道具}) =>{const errorMsg = touch[field.name] &&错误[字段名]const validateStatus = errorMsg ?错误": (touched[field.name] && !errors[field.name]) ?成功": 不明确的返回 (<div><表单项标签={道具.标签}帮助={errorMsg}validateStatus={validateStatus}有反馈{...props.formitemlayout}><DatePicker onChange={onChange} defaultPickerValue={moment()}/></FormItem>)}导出默认日期输入
我正在将此 ant 组件添加到 formik 字段组件中，使用 handleSubmit 提交表单并应用 YUP 验证.我在提交表单时遇到问题，我正在获取所需的 DatePicker 验证，而问题是选择 DatePicker 的值，我没有获取该值，并且在提交表单后显示验证消息.
class FormikApollo 扩展 React.Component {使成为() {const { values, handleSubmit, setFieldValue } = this.props返回 (<div align="center"><Form onSubmit={handleSubmit}><字段名称=用户名"标签=名称"占位符="输入名称"组件={TextField}值={values.username}formitemlayout={formItemLayout}/><字段名称=电子邮件"标签=电子邮件"placeholder="输入电子邮件"组件={TextField}值={values.email}formitemlayout={formItemLayout}/><字段名称=密码"标签=密码"类型=密码"占位符="输入密码"组件={TextField}formitemlayout={formItemLayout}/><字段姓名=出生日期"标签=出生日期"类型=日期"组件={日期输入}formitemlayout={formItemLayout}defaultValue={values.dateofbirth}格式={日期格式}/><Button type="primary" htmlType="submit">Submit</Button></表格>)}}这里我通过 withFormik 获取值并使用 handleSubmit 提交表单.为什么我没有获得 datepicker 值以及为什么在选择 datepicker 值后显示验证消息?
const FormikApp = (withFormik)({mapPropsToValues({ 用户名，电子邮件，密码，出生日期}) {返回 {用户名:用户名 ||'',电子邮件:电子邮件 ||'',密码:密码 ||'',出生日期:出生日期 ||''}},验证架构:是的.对象().形状({用户名:Yup.string().min(3, "用户名必须大于 3 个字符").required("需要用户名"),电子邮件:Yup.string().email("无效邮箱！！").required("需要邮箱"),密码:Yup.string().min(6, "密码必须在 6 个字符以上").required("需要密码"),出生日期:Yup.string().required("日期是必需的")}),handleSubmit(values, { resetForm }) {重置表格();控制台日志(值)}})(FormikApollo)在你的 DateInput 组件中尝试使用 Formik 的 setFieldValue() 方法设置值是否有效或不.我相信您可以通过以下方式提取它:form: { touch, errors, setFieldValue }.
还要检查表单中的 touched 项目，并确保您正在更改日期字段的值.
Here i am creating Datepicker with antd and passing this antd datepicker to formik field.My sample code for Datepicker with antd
import React from "react";
import { Form, DatePicker } from "antd"
import { Field } from "formik";
import moment from 'moment';
const FormItem = Form.Item;
function onChange(date, dateString) {
console.log(date, dateString);
}
const dateFormat = "MM-DD-YYYY"
// Here i am adding antd error message through DateInput
const DateInput = ({
field,
form: { touched, errors },
...props
}) => {
const errorMsg = touched[field.name] && errors[field.name]
const validateStatus = errorMsg ? "error"
: (touched[field.name] && !errors[field.name]) ? "success"
: undefined
return (
<div>
<FormItem
label={props.label}
help={errorMsg}
validateStatus={validateStatus}
hasFeedback
{...props.formitemlayout}>
<DatePicker onChange={onChange} defaultPickerValue={moment()}/>
</FormItem>
</div>
)
}
export default DateInput
i am adding this ant component to formik field component,submit the form using handleSubmit and applying the YUP validations. iam getting a problem was submitting the form iam getting the required validation of DatePicker, and problem is selecting the values of DatePicker iam not getting the value and validation message is displayed after submitting the form.
class FormikApollo extends React.Component {
render() {
const { values, handleSubmit, setFieldValue } = this.props
return (
<div align="center">
<Form onSubmit={handleSubmit}>
<Field
name="username"
label="Name"
placeholder="Enter a Name"
component={TextField}
value={values.username}
formitemlayout={formItemLayout}
/>
<Field
name="email"
label="Email"
placeholder="Enter an Email"
component={TextField}
value={values.email}
formitemlayout={formItemLayout}
/>
<Field
name="password"
label="Password"
type="password"
placeholder="Enter a Password"
component={TextField}
formitemlayout={formItemLayout}
/>
<Field
name="dateofbirth"
label="dateOfBirth"
type="date"
component={DateInput}
formitemlayout={formItemLayout}
defaultValue={values.dateofbirth}
format={dateFormat}
/>
<Button type="primary" htmlType="submit">Submit</Button>
</Form>
)
}
}
Here i am getting the values through withFormik and submitting the form using handleSubmit. Why iam not getting datepicker value and why validation message is displayed after selecting a datepicker value?
const FormikApp = (withFormik)({
mapPropsToValues({ username, email, password, dateofbirth }) {
return {
username: username || '',
email: email || '',
password: password || '',
dateofbirth: dateofbirth || ''
}
},
validationSchema: Yup.object().shape({
username: Yup.string()
.min(3, "Username must be above 3 characters")
.required("Username is required"),
email: Yup.string()
.email("Invalid Email !!")
.required("Email is required"),
password: Yup.string()
.min(6, "Password must be above 6 characters")
.required("Password is required"),
dateofbirth: Yup.string().required("Date is required")
}),
handleSubmit(values, { resetForm }) {
resetForm();
console.log(values)
}
})(FormikApollo)
In your DateInput component try to set value with setFieldValue() method of Formik whether it is valid or not. I believe you can extract it from via: form: { touched, errors, setFieldValue }.
Also check touched items in your form, and make sure that you are changing the value of your date field.
这篇关于如何使用 antd 和 formik 设置和获取日期选择器值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
