<ErrorMessage />

<ErrorMessage /> 是一个组件，如果给定字段已被访问（即 touched[name] === true）（并且存在 error 消息），则会渲染该字段的错误消息。它期望给定字段的所有错误消息都存储为字符串。与 <Field />、<FastField /> 和 <FieldArray /> 一样，支持类似 lodash 的点路径和括号语法。

¥<ErrorMessage /> is a component that renders the error message of a given field if that field has been visited (i.e.touched[name] === true) (and there is an error message present). It expects that all error messages are stored for a given field as a string. Like <Field />, <FastField />, and <FieldArray />, lodash-like dot path and bracket syntax is supported.

示例

¥Example

 import React from 'react';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from "yup";
 

 const SignupSchema = Yup.object().shape({
   name: Yup.string()
     .min(2, 'Too Short!')
     .max(70, 'Too Long!')
     .required('Required'),
   email: Yup.string()
     .email('Invalid email')
     .required('Required'),
 });
 

 export const ValidationSchemaExample = () => (
   <div>
     <h1>Signup</h1>
     <Formik
       initialValues={{
         name: '',
         email: '',
       }}
       validationSchema={SignupSchema}
       onSubmit={values => {
         // same shape as initial values
         console.log(values);
       }}
     >
       {({ errors, touched }) => (
         <Form>
           <Field name="name"  />
 -           {errors.name && touched.name ? (
 -            <div>{errors.name}</div>
 -          ) : null}
 +         <ErrorMessage name="name" />
           <Field name="email" type="email" />
 -           {errors.email && touched.email ? (
 -            <div>{errors.email}</div>
 -          ) : null}
 +         <ErrorMessage name="email" />
           <button type="submit">Submit</button>
         </Form>
       )}
     </Formik>
   </div>
 );

属性

¥Props

参考

¥Reference

属性

¥Props

children

children?: ((message: string) => React.ReactNode)

返回有效 React 元素的函数。仅当该字段被触摸并且存在错误时才会被调用。

¥A function that returns a valid React element. Will only be called when the field has been touched and an error exists.

 // the render callback will only be called when the
 // field has been touched and an error exists and subsequent updates.
 <ErrorMessage name="email">{msg => <div>{msg}</div>}</ErrorMessage>

component

component?: string | React.ComponentType<FieldProps>

React 组件或要渲染的 HTML 元素的名称。如果未指定，<ErrorMessage> 将仅返回一个字符串。

¥Either a React component or the name of an HTML element to render. If not specified, <ErrorMessage> will just return a string.

 <ErrorMessage component="div" name="email" />
 // --> {touched.email && error.email ? <div>{error.email}</div> : null}
 

 <ErrorMessage component="span" name="email" />
 // --> {touched.email && error.email ? <span>{error.email}</span> : null}
 

 <ErrorMessage component={Custom} name="email" />
 // --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}
 

 <ErrorMessage name="email" />
 // This will return a string. React 16+.
 // --> {touched.email && error.email ? error.email : null}

id

id?: string

Formik 状态下字段的 id。为了访问 DOM 元素以进行 e2e 测试，它不会以任何方式影响实现，因为仍然可以省略 prop。

¥A field's id in Formik state. To get access to DOM elements for e2e testing purposes, it doesn't impact the implementation in any way as the prop can still be omitted.

 // id will be used only for testing purposes
 // not contributing anything to the core implementation.
 <ErrorMessage name="email" id="form_email_id" />

name

name: string 必需的

¥name: string Required

Formik 状态的字段名称。要访问嵌套对象或数组，名称还可以接受类似于 lodash 的点路径，如 social.facebook 或 friends[0].firstName

¥A field's name in Formik state. To access nested objects or arrays, name can also accept lodash-like dot path like social.facebook or friends[0].firstName

render

render?: (error: string) => React.ReactNode

返回有效 React 元素的函数。仅当该字段被触摸并且存在错误时才会被调用。

¥A function that returns a valid React element. Will only be called when the field has been touched and an error exists.

 // the render callback will only be called when the
 // field has been touched and an error exists and subsequent updates.
 <ErrorMessage name="email" render={msg => <div>{msg}</div>} />
Previousconnect()Next<FastField />
Formik 中文网 - 粤ICP备13048890号