reactjs - Formik + yup 不显示错误
问题描述
我有以下表格:
import React from 'react'
import PanelInputField from './form_components/panel_input_field'
import * as yup from 'yup'
import { withFormik, FormikErrors, FormikProps } from "formik";
const validationSchema = yup.object().shape({
length: yup
.number()
.min(200, 'NOT BIG ENOUGH')
.required()
})
class SpecificationsForm extends React.PureComponent {
render() {
const {
values,
handleInputChange,
handleSelectChange,
touched,
errors
} = this.props;
console.log(errors)
return (
<div className="panel panel-default specifications-panel" id="js-turbosquid-product-specifications-panel">
<div className="panel-heading">
<a href="#" className="js-more-info" data-toggle="collapse" data-target="#specifications-panel-instructions" tabIndex="-1">
Specifications
<i className="fa fa-question-circle" />
</a>
</div>
<div className="panel-body panel-collapse collapse in" id="specification-panel-body">
<div className="panel-body-container">
<div id="specifications-panel-instructions" className="panel-instructions collapse" />
<div className="row">
<div className="col-xs-6">
<PanelInputField
label='Length'
value={ values.length }
onChange={ handleInputChange }
formName='turbosquid_product_form_length'
fieldName='length'
/>
<div className="form-field-error">{errors.length ? errors.length : "No Error"}</div>
</div>
</div>
</div>
</div>
)
}
}
const ProductSpecificationsMotionCapturePanel = withFormik({
validationSchema,
enableReinitialize: true,
mapPropsToValues: (props) => (props),
handleInputChange: (props) => (props.handleInputChange),
handleSelectChange: (props) => (props.handleSelectChange),
})(SpecificationsForm)
export default ProductSpecificationsMotionCapturePanel
表单工作正常,显示和所有内容,但我似乎无法让 formik 看到错误。在这个例子中,我有整数值的长度字段。每当我输入一些东西时,验证工作(console.log
打印)但对象完全是空的。
即使我在输入中写了非数字,也不会显示任何错误。
有没有人对我可以做些什么来使它工作有什么建议?
解决方案
您是否设置了初始值?看起来你没有在这个文件中。如果没有,请尝试设置它,看看它是否有效。
推荐阅读
- assembly - movzx 和 cwd - 它们可以互换吗?
- r - 计算固定效应 logit 的混淆矩阵
- c - SDL2 不呈现多个视口
- c# - ADFS 与 SAML2.0 WebSSO 协议。签名认证失败
- php - 按类别查看产品中的 WooCommerce 星级评分(古腾堡块)
- javascript - Jquery比较用复选框选择的表行并比较列
- powershell - 比较一个文件的文件大小的脚本
- python - 如何合并两个具有几乎相同元素的 json
- ruby - 在 Ruby 中,您可以将指向节点的点存储在哈希中以供以后替换
- excel - 如何在不更改格式的情况下使用 VBA 对值进行排序?