<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 狀態中欄位的的名稱。要訪問巢狀物件或陣列，名稱也可以接受 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>} />