首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Formik + yup不显示错误

Formik + yup不显示错误
EN

Stack Overflow用户
提问于 2018-09-06 20:58:31
回答 1查看 3.7K关注 0票数 3

我有以下表格:

代码语言:javascript
复制
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打印),但是对象是完全空的。

即使我在输入中输入非数字,也不会显示任何错误。

有没有人建议我可以做些什么来让它工作?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52204698

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档