<ErrorMessage />

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

示例

1 import React from 'react';
2 import { Formik, Form, Field, ErrorMessage } from 'formik';
3 import * as Yup from "yup";
4 
5 const SignupSchema = Yup.object().shape({
6   name: Yup.string()
7     .min(2, 'Too Short!')
8     .max(70, 'Too Long!')
9     .required('Required'),
10   email: Yup.string()
11     .email('Invalid email')
12     .required('Required'),
13 });
14 
15 export const ValidationSchemaExample = () => (
16   <div>
17     <h1>Signup</h1>
18     <Formik
19       initialValues={{
20         name: '',
21         email: '',
22       }}
23       validationSchema={SignupSchema}
24       onSubmit={values => {
25         // same shape as initial values
26         console.log(values);
27       }}
28     >
29       {({ errors, touched }) => (
30         <Form>
31           <Field name="name"  />
32 -           {errors.name && touched.name ? (
33 -            <div>{errors.name}</div>
34 -          ) : null}
35 +         <ErrorMessage name="name" />
36           <Field name="email" type="email" />
37 -           {errors.email && touched.email ? (
38 -            <div>{errors.email}</div>
39 -          ) : null}
40 +         <ErrorMessage name="email" />
41           <button type="submit">Submit</button>
42         </Form>
43       )}
44     </Formik>
45   </div>
46 );

属性

参考

属性

`children`

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

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

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

`component`

component?: string | React.ComponentType<FieldProps>

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

1 <ErrorMessage component="div" name="email" />
2 // --> {touched.email && error.email ? <div>{error.email}</div> : null}
3 
4 <ErrorMessage component="span" name="email" />
5 // --> {touched.email && error.email ? <span>{error.email}</span> : null}
6 
7 <ErrorMessage component={Custom} name="email" />
8 // --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}
9 
10 <ErrorMessage name="email" />
11 // This will return a string. React 16+.
12 // --> {touched.email && error.email ? error.email : null}

`id`

id?: string

Formik 状态中字段的 id。为了访问用于端到端测试目的的 DOM 元素，它不会以任何方式影响实现，因为仍然可以省略该属性。

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

`name`

name: string 必填

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

`render`

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

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

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