Maison > Questions et réponses > le corps du texte
J'utilise antd "antd": "^5.5.1"
DatePicker 来绑定日期字符串,这是 App.tsx
Le code est le suivant :
import { DatePicker, Form } from "antd"; import React from "react"; import { useState } from "react"; export interface EduModel { admission: String; } const App: React.FC = () => { const [edu, setEdu] = useState<EduModel>(); const onFinish = (values: any) => { }; React.useEffect(() => { let edu1: EduModel = { admission: '1995-09-01' }; setEdu(edu1); }, []); const onFinishFailed = (errorInfo: any) => { }; const [form] = Form.useForm(); React.useEffect(() => { form.setFieldsValue(edu) }, [form, edu]); return ( <div> <Form onFinish={onFinish} onFinishFailed={onFinishFailed} size="large" form={form} > <Form.Item label={"admission"} name="admission" rules={[ { required: true, message: "please input date" } ]}> <DatePicker format={"YYYY-MM-DD"}></DatePicker> </Form.Item> </Form> </div> ); } export default App;
Lorsque j'exécute cette page simple, l'erreur s'affiche :
dayjs.js:185 Uncaught TypeError: date.locale is not a function at Object.format (dayjs.js:185:1) at formatValue (dateUtil.js:104:1) at useValueTexts.js:18:1 at useMemo (useMemo.js:5:1) at useValueTexts (useValueTexts.js:8:1) at InnerPicker (Picker.js:150:1) at renderWithHooks (react-dom.development.js:16305:1) at updateFunctionComponent (react-dom.development.js:19588:1) at beginWork (react-dom.development.js:21601:1) at beginWork (react-dom.development.js:27426:1)
J'ai essayé d'ajouter le format de chaîne DatePicker mais je ne parviens toujours pas à résoudre le problème. Ai-je manqué quelque chose? Que dois-je faire pour que cela fonctionne ?
P粉4642089372024-01-09 17:08:41
Je pense qu'Ant Datepicker dans la version 5 accepte le type ou la chaîne dayjs et ne peut pas accepter undéfini. Initialement, les valeurs de votre formulaire ne sont pas définies. Mettez à jour sa chaîne plus tard.
Peux-tu l'essayer ?
Lorsque vous définissez la valeur initiale :
form.setFieldsValue({ admission: dayjs(edu?.admission) });
Lorsque vous soumettez une valeur :
const onFinish = (values: any) => { console.log({ ...values, admission: dayjs(values?.admission).format("YYYY-MM-DD") }); };
J'espère que cela vous aidera.
import { DatePicker, Form, Button } from "antd"; import React from "react"; import { useState } from "react"; import dayjs, { Dayjs } from "dayjs"; export interface EduModel { admission: String; } const App: React.FC = () => { const [edu, setEdu] = useState<EduModel>(); const onFinish = (values: any) => { console.log({ ...values, admission: dayjs(values?.admission).format("YYYY-MM-DD") }); }; React.useEffect(() => { let edu1: EduModel = { admission: dayjs("1995-09-01").format("YYYY-MM-DD") }; setEdu(edu1); }, []); const onFinishFailed = (errorInfo: any) => {}; const [form] = Form.useForm(); React.useEffect(() => { if (edu) { form.setFieldsValue({ admission: dayjs(edu?.admission) }); } }, [form, edu]); return ( <div> <Form onFinish={onFinish} onFinishFailed={onFinishFailed} size="large" form={form} > <Form.Item label={"admission"} name="admission" rules={[{ required: true, message: "please input date" }]} > <DatePicker format={"YYYY-MM-DD"}></DatePicker> </Form.Item> <Form.Item> <Button htmlType="submit" type="primary"> Submit </Button> </Form.Item> </Form> </div> ); }; export default App;