ऑनसबमिट निष्पादित नहीं होता है और मुझे नहीं पता कि समस्या क्या है, इसे हैंडल के बिना निष्पादित करें लेकिन मुझे फॉर्म से सभी डेटा प्राप्त करने की आवश्यकता है। मुझे लगता है कि मैंने इस फॉर्म के लिए आवश्यक सब कुछ किया है लेकिन यह काम नहीं कर रहा है। मुझे मदद की ज़रूरत है?

import { useForm } from 'react-hook-form';

const LoginPage = () =>{

const { register, handleSubmit } = useForm();
const onSubmit = (data) => (
    alert(JSON.stringify(data))
);
  
return(
    <section className="section-login">
        <div className="login__header">
            <img src={anarLogo} className="login__header--logo" alt="header logo" />
        </div>
        <form className='login__form' onSubmit={handleSubmit(onSubmit)}>
            <Input
                register={register} 
                inputName='User name'
                inputType='text'
                inputClass='form__input--text' 
                inputPlaceholder='Username'
                // inputErrors = {errors}
                inputLabel = 'username'
                rules={{ required: true, maxLength: 20, min: 3 }}
            />
            <Input 
                register={register}
                inputName='Password'
                inputType='password'
                inputClass='form__input--password'
                inputPlaceholder='Password'
                // inputErrors = {errors}
                inputLabel = 'password'
                rules={{ required: true, maxLength: 20, min: 3 }}
            />
            <button type='submit'></button>
        </form>
    </section>
  )
 }

मेरी इनपुट फ़ाइल:

 const Input = ({register, inputName, inputType, inputClass, inputPlaceholder, inputLabel, 
     rules,}) => {


return(
    <div className='form__input'>
        <input
        {...register(inputLabel , {...rules})}
        name={inputName}
        type={inputType} 
        className={`input ${inputClass}`} 
        placeholder={ inputPlaceholder }
        />
    </div>
 )
}

export default Input;
0
Mansour Qaderi 6 जुलाई 2021, 11:34

3 जवाब

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

register() फ़ंक्शन के साथ एक ऑब्जेक्ट देता है एक <कोड>नाम संपत्ति। अपनी इनपुट फ़ाइल में, आप उस नाम को ओवरराइट कर रहे हैं जो यह प्रदान करता है (उस लाइन के ठीक नीचे देखें जहां register() का परिणाम )। यह प्रपत्र आपके द्वारा सेट किए गए सत्यापन नियमों को विफल करने का कारण बन रहा है। handleSubmit() का पहला तर्क नहीं है सत्यापन सफल होने तक कॉल करें।

0
Calvin 6 जुलाई 2021, 09:15

आप इनलाइन फ़ंक्शन का उपयोग सबमिट पर कॉल करने के लिए कर सकते हैं क्योंकि आप handleSubmit को पैरामीटर पास कर रहे हैं।

<form className='login__form' onSubmit={() => handleSubmit(onSubmit)}>
0
Shreyas Jadhav 6 जुलाई 2021, 08:39

केवल स्थान रजिस्टर को अंतिम में बदलें जैसे:

      <input
        name={inputName}
        type={inputType} 
        className={`input ${inputClass}`} 
        placeholder={ inputPlaceholder }
        {...register(inputLabel , {...rules})}
        />
0
Mansour Qaderi 7 जुलाई 2021, 05:04