मैं अपने 2 इनपुट को नियंत्रित करने के लिए useReducer का उपयोग कर रहा हूं:
const [noteInput, setNoteInput] = useReducer(
(state, newState) => ({ ...state, ...newState }),
{
title: '',
content: ''
}
);
बटन पर क्लिक करने के बाद मैं चाहता हूं कि दोनों इनपुट साफ़ हो जाएं। मैं रेड्यूसर का उपयोग करने के बाद यह कैसे कर सकता हूं?
3 जवाब
आप सेटस्टेट का उपयोग करके अपने राज्य को खाली करने के लिए अपडेट कर सकते हैं या आप उस स्थिति को खाली स्ट्रिंग में अपडेट करने के लिए अन्य कार्रवाइयां भेज सकते हैं। https://redux.js.org/basics/reducers#reducers
यदि आप अपने फॉर्म को खाली करने के लिए यूज रेड्यूसर का उपयोग करना चाहते हैं तो आप ऐसा करने के लिए प्रेषण का उपयोग कर सकते हैं। आइए एक उदाहरण के रूप में इस उदाहरण बटन घटक का उपयोग करें।
//Component
<Button onClick={() => {dispatch({ type: "CLEAR_FORM"})}}>Submit</Button>
बटन पर क्लिक करने के बाद "CLEAR_FORM" रेड्यूसर को भेज दिया जाता है।
//Form Initial State & Reducer switch statement
export const initialState={
username:"",
password:""
}
export const reducer = (state, action) => {
switch(action.type){
case: "CLEAR_FORM":
return {
username:"",
password:"",
}
default:
return state
}
}
जब रेड्यूसर को {टाइप: "LOG_OUT"} मिलता है, तो इस मामले में, यह उपयोगकर्ता नाम और पासवर्ड फ़ील्ड को एक खाली स्ट्रिंग पर रीसेट कर देता है।
https://reactjs.org/docs/hooks-reference.html#usereducer
आप React.useReducer() को init नामक तीसरा तर्क दे सकते हैं। इसे आलसी इनिशियलाइज़ेशन कहा जाता है और यह प्रारंभिक अवस्था में वापस आने का एक त्वरित तरीका है।
https://reactjs.org/docs/hooks-reference.html#lazy-initialization
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।