इसलिए मैं AntDesign के रूपों का उपयोग करना पसंद करता हूं क्योंकि मुझे पसंद है कि उनका सत्यापन कैसे काम करता है। हालांकि मैं अपनी वेबसाइट के लिए इसे और अधिक वैयक्तिकृत बनाने के लिए Input घटक को बदलना चाहता था। इसलिए मैंने अपना CustomInput घटक बनाया और इसे उनके Input घटक से बदल दिया। सब कुछ ठीक काम करता है। मेरे मूल्य उनके onFinish फ़ंक्शन और सब कुछ द्वारा पकड़े गए हैं। हालाँकि, मुझे पता है कि कंसोल मुझ पर पागल क्यों है और मुझे बताता रहता है कि एक इनपुट घटक है जिसे नियंत्रित नहीं किया जाता है।

A component is changing an uncontrolled input to be controlled. 
This is likely caused by the value changing from undefined to a defined value, which should not happen. 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

मैं इसे केवल अनदेखा करने का लुत्फ उठा रहा हूं क्योंकि यह कैसे काम करता है इसके साथ सचमुच कुछ भी गलत नहीं है।

यहाँ कोड है:

const CustomInput = styled.input`
    background-color: #f5f5f5;
    border: 0.2px solid #d1d1d1;
    border-radius: 4px;
    padding: 8px 18px;
    width: 290px;
    font-family: "Mulish", sans-serif;
    font-weight: 300;
    font-size: 13pt;
    outline: none;
    transition: 0.3s ease-in-out;

    &:hover {
        background-color: #f2f2f2;
    }

    &::placeholder {
        color: #ababab;
        font-weight: 200;
    }
`;

const CustomeBtn = styled.button`
    background-color: #293651;
    color: #f7f5fb;
    padding: 8px 20px;
    outline: none;
    border: none;
    border-radius: 20px;
    font-family: "Mulish", sans-serif;
    font-size: 13pt;
    font-weight: 300;
    margin-right: 10px;
    transition: 0.3s ease-in-out;

    &:hover {
        background-color: #ffbb33;
        color: black;
    }
`;

const CustomLink = styled(Link)`
    font-family: "Mulish", sans-serif;
    font-size: 12pt;
    font-weight: 400;
    color: #293651;
    text-align: center;

    &:hover {
        color: #ffbb33;
    }
`;

function Login() {
    const onFinish = (values) => {
        console.log("Received values of form: ", values);
    };

    return (
        <MainContainer>
            <Heading>Login</Heading>
            <LoginIcon />
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: "Please input your Username!",
                        },
                    ]}
                >
                    ---------My custom input-----------
                    <CustomInput placeholder="Username" autoComplete='on'/>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: "Please input your Password!",
                        },
                    ]}
                >
                    -----------My custom input-------------
                    <CustomInput type="password" placeholder="Password" autoComplete='on' />
                </Form.Item>

                <Form.Item>
                    <CustomeBtn htmlType="submit">Login</CustomeBtn>
                    Or <CustomLink to="/register">register now!</CustomLink>
                </Form.Item>
            </Form>
        </MainContainer>

अजीब बात यह है कि जब मैं अपने इनपुट फ़ील्ड में एक value विशेषता जोड़ता हूं, तो वह इसे नहीं उठाता है। जैसे अगर मैं value='this' जोड़ता हूं, तो यह दिखाई नहीं देगा और यह मुझे सामान्य रूप से फ़ील्ड में टाइप करने देगा .... क्या हो रहा है

0
Saif eldeen Adel 18 फरवरी 2021, 16:52
आप अपने कोड का महत्वपूर्ण हिस्सा भूल गए हैं जो CustomInput का कोड है। जैसा कि त्रुटि कहती है: यदि आप एक अंतर्निहित <input /> तत्व को value प्रोप प्रदान करते हैं तो इसे कभी भी undefined से किसी और चीज़ में नहीं बदलना चाहिए।
 – 
trixn
18 फरवरी 2021, 16:56
आपका क्या मतलब है? मुझे अपने कस्टम इनपुट में कोई और कोड प्रदान करने की आवश्यकता नहीं है। यह प्लेसहोल्डर के साथ एक इनपुट फील्ड है। अब क्या शेष है? जैसा कि मैंने कहा, ऑनफिनिश विधि मेरे मूल्यों को पकड़ती है। और कंसोल उन्हें कोई समस्या नहीं लॉग करता है, वहां से मैं उनका उपयोग कर सकता हूं। तो चींटी डिजाइन किसी तरह इसका ख्याल रखता है। जैसा कि मैंने कहा, जब मैं कस्टम इनपुट के लिए एक मूल्य विशेषता प्रदान करता हूं, तो यह इसे पंजीकृत नहीं करता है। मानो वह वहां भी नहीं है।
 – 
Saif eldeen Adel
18 फरवरी 2021, 17:04
मैंने जो मांगा वह यह है कि क्या आप अपने CustomInput घटक का कोड प्रदान कर सकते हैं।
 – 
trixn
18 फरवरी 2021, 17:11
ओह कोई कोड नहीं है। मैं स्टाइल-घटकों का उपयोग कर रहा हूँ। ऊपर देखो, मैंने इसे वहां परिभाषित किया है। यह सिर्फ एक html इनपुट फ़ील्ड है
 – 
Saif eldeen Adel
18 फरवरी 2021, 17:15

1 उत्तर

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

समस्या यह है कि आपके इनपुट का कोई प्रारंभिक मूल्य नहीं है जो या तो initialValues में Form पर या Form.Item पर initialValue के माध्यम से प्रदान किया गया है। इसलिए जब आप पहली बार कोई मान दर्ज करते हैं तो यह undefined से बदलकर किसी अन्य चीज़ में बदल जाता है जो इसे अनियंत्रित इनपुट से नियंत्रित इनपुट में बदल देता है।

रिएक्ट इसे एक संभावित गलती मानता है क्योंकि इनपुट को या तो नियंत्रित किया जाना चाहिए (हमेशा undefined के अलावा एक मूल्य प्रदान किया जाता है) या कभी भी कोई मूल्य नहीं दिया जाता है (जिस स्थिति में मान इनपुट तत्व द्वारा ही प्रबंधित किया जाता है)। माउंट होने के दौरान उन्हें एक से दूसरे में नहीं बदलना चाहिए।

या तो initialValues में या initialValue में एक प्रारंभिक मान प्रदान करें:

<Form
    name="normal_login"
    className="login-form"
    initialValues={{
        remember: true,
        Username: '',
        password: '',
    }}
    onFinish={onFinish}
>

या

<Form.Item name="username" initialValue="">{/* ... */}</Form.Item>

आप Input घटक का भी उपयोग कर सकते हैं antd जो कि अंतर्निहित इनपुट तत्व पर एक सामान्य प्रारंभिक मान भी सेट करता है, यदि कोई प्रदान नहीं किया गया है तो प्रकार पर निर्भर करता है।

1
trixn 18 फरवरी 2021, 19:34
1
धन्यवाद यह बहुत अच्छा है। मुझे अभी एहसास हुआ कि मैं अभी const CustomInput = styled(Input) कर सकता था, इस प्रकार antd इनपुट घटक से सब कुछ विरासत में मिला। आपका समाधान ठीक वैसे ही काम करता है जैसे
 – 
Saif eldeen Adel
18 फरवरी 2021, 17:37
खुशी है कि इससे मदद मिली।
 – 
trixn
18 फरवरी 2021, 19:05