यह शायद इस प्रश्न को पोस्ट करने के लिए सबसे अच्छी जगह नहीं है, लेकिन फिर कहाँ?


नीचे दिया गया कोड फॉर्मिक के अवलोकन पृष्ठ से लिया गया है और मैं onSubmit हैंडलर:

प्रपत्र तत्व में एक onSubmit गुण है जो handleSubmit को संदर्भित करता है जो उस अनाम फ़ंक्शन पर पारित किया जाता है: <form onSubmit={handleSubmit}>। वह कहां से आता है?

फॉर्मिक घटक में एक onSubmit संपत्ति भी है:

onSubmit={(values, { setSubmitting }) => { ... }

ये एक दूसरे से कैसे संबंधित हैं? क्या हो रहा है?

import React from 'react';
import { Formik } from 'formik';

const Basic = () => (
  <div>
    <h1>Anywhere in your app!</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        let errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        /* and other goodies */
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
);

export default Basic; 
0
zok 8 अप्रैल 2019, 17:21

1 उत्तर

सबसे बढ़िया उत्तर

घटक एक प्रोप के रूप में सबमिट करता है जहां आप अपना फॉर्म जमा करते समय कोड निष्पादित कर सकते हैं जिसे आप निष्पादित करना चाहते हैं। इस प्रॉप में कुछ तर्क जैसे मान (फॉर्म के मान) आपके ऑनसबमिट फ़ंक्शन में उपयोग करने के लिए।

हैंडलसबमिट फॉर्म फॉर्मिक लाइब्रेरी से स्वतः उत्पन्न होता है जो यहां पर बताए गए कुछ सामान्य फॉर्म लॉजिक्स को स्वचालित करता है। ए>। हैंडल सबमिट स्वचालित रूप से अपने चरणों (प्री-सबमिट, सत्यापन, सबमिशन) के हिस्से के रूप में ऊपर उल्लिखित सबमिट फ़ंक्शन को स्वचालित रूप से निष्पादित करेगा। उम्मीद है कि यह आपके सवाल का जवाब देता है!

0
John Wong 8 अप्रैल 2019, 17:55