परिवर्तन पर इनपुट के मूल्य में यूज़स्टैट कास्ट कैसे सेट करें

Question

कहो मैंने एक कार्यात्मक घटक में एक चर बनाया जैसे:

const [quizName, setQuizName] = useState("");

उपयोगकर्ता किसी इनपुट में क्या दर्ज करता है, इसके आधार पर मैं इस मूल्य को कैसे बदल सकता हूं। मेरा विचार यह था:

<input
    value={quizName}
    onChange={setQuizName(value)}
></input>

लेकिन यह नहीं पता कि मूल्य क्या है, मैं अपने क्विज़नाम चर में मूल्य कैसे प्राप्त कर सकता हूं?

Answer 1

<input
    value={quizName}
    onChange={(e)=>setQuizName(e.target.value)}>
</input>

Answer 2

सबसे आसान तरीका इनपुट के ऑनचेंज में एक फ़ंक्शन है:

<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />

ठीक है!, लेकिन भगवान की खातिर कृपया ऐसा करना बंद कर दें!

यहाँ कारण है:

आप इनपुट के प्रत्येक परिवर्तन पर एक फ़ंक्शन बना रहे हैं और इसे चला रहे हैं! यह प्रदर्शन के लिए ठीक नहीं है! खासकर यदि आप इसे अपने घटकों में हर जगह बड़े पैमाने पर करते हैं!

आपको क्या करने की आवश्यकता है, बस useCallbackनीचे की तरह उपयोग करें:

const [quizName, setQuizName] = useState("");

const handleInputChange = useCallback((e) => {
   setQuizName(e.target.value)
}, [setQuizName])


return (
   <input value={quizName} onChange={handleInputChange} />
)

यहाँ useCallbackप्रतिक्रिया दस्तावेजों में एक विवरण है :

https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 3

onChange={setQuizName(value)}

जब आप फ़ंक्शन को इस तरह से कॉल करते हैं, तो यह आपको बदलने के लिए इंतजार किए बिना निष्पादित हो जाएगा।

onChange={(e) => setQuizName(e.target.value)}

यह करने का सही तरीका है