तो, मेरे पास कुछ टेक्स्ट बॉक्स (नाम और टाइमर i/p बॉक्स डिस्प्ले) और स्टार्ट/स्टॉप बटन के साथ एक कार्यात्मक घटक है।
मझे वह चहिए;
- जब प्रारंभ क्लिक किया जाता है, तो टाइमर बॉक्स को गिनना चाहिए और सेकंड बीतने चाहिए।
- जब स्टॉप पर क्लिक किया जाता है, तो नाम और समय को redux store में सहेजा जाना चाहिए और टाइमर i/p बॉक्स को शून्य पर वापस जाना चाहिए। (नाम/टाइमर के लिए सहेजे गए मान किसी अन्य घटक के भाग के रूप में नीचे प्रदर्शित किए गए हैं)
- जब फोकस टाइमर बॉक्स पर हो, तो टाइमर को रुकना/रोकना चाहिए
- जब हम टाइमर बॉक्स से फोकस आउट/ब्लर करते हैं, तो टाइमर को उसी बिंदु से फिर से शुरू करना चाहिए।
मैंने नीचे दिए गए लिंक में अपना कोड सैंडबॉक्स में जोड़ा है। https://codesandbox.io/s/crisil-tp7pv?file =/src/TestComponent.js
प्रासंगिक कोड का कुछ हिस्सा नीचे भी हाइलाइट किया गया है। अनिवार्य रूप से, मैं समझना चाहता था, अगर मैं टाइमर बॉक्स को अपडेट करने के लिए useEffect का उपयोग करके सही जा रहा हूं? दृष्टिकोण में सुधार के लिए कोई सुझाव?
export const TestComponent = (props) => {
const [task, setTask] = useState({ id: 0, taskName: "", timeField: 0 });
const [stopTimerEvt, setStopTimerEvt] = useState(true);
//var timerId;
useEffect(() => {
var seconds = 0;
var interval;
if (stopTimerEvt === false) {
interval = setInterval(function () {
setTask((prevState) => {
return { ...prevState, timeField: seconds++ };
});
}, 1000);
}
return () => clearInterval(interval);
}, [stopTimerEvt]);
const startTimer = () => {
setStopTimerEvt(false);
/*
timerId = setInterval(function () {
setTask((prevState) => {
return { ...prevState, timeField: seconds++ };
});
}, 1000);
*/
};
const stopTimer = () => {
//clearInterval(timerId);
setStopTimerEvt(true);
props.saveTask(task);
setTask((prevState) => {
return { ...prevState, timeField: 0 };
});
};
const handleChange = (e) => {
setTask((prevState) => ({
...prevState,
[e.target.id]: e.target.value
}));
};
return (
<main>
<input
type="text"
id="taskName"
value={task.taskName}
onChange={handleChange}
/>
<input
type="number"
id="timeField"
value={task.timeField}
onChange={handleChange}
/>
<button id="start" onClick={startTimer}>
Start
</button>
<button id="stop" onClick={stopTimer}>
Stop
</button>
</main>
);
};
export default connect(null, { saveTask })(TestComponent);
0
copenndthagen
13 जिंदा 2021, 20:33
क्या आपने मेरे उत्तर की कोशिश की?
– Taghi Khavari
14 जिंदा 2021, 12:09
1 उत्तर
सबसे बढ़िया उत्तर
यहाँ कुछ बदलाव हैं जो आपको TestComponent में करने होंगे:
export const TestComponentNew = (props) => {
const [task, setTask] = useState({ taskName: "", timeField: 0 });
const timer = useRef();
useEffect(() => {
return () => stopTimer();
}, []);
const startTimer = () => {
timer.current = setInterval(function () {
setTask((v) => ({ ...v, timeField: +v.timeField + 1 }));
}, 1000);
};
const stopTimer = () => {
clearInterval(timer.current);
timer.current = null;
props.saveTask(task);
setTask({ taskName: "", timeField: 0 });
};
const handleChange = (e) => {
setTask((prevState) => ({
...prevState,
[e.target.id]: e.target.value
}));
};
return (
<main>
<input
type="text"
id="taskName"
value={task.taskName}
onChange={handleChange}
placeholder="task name"
/>
<input
type="number"
id="timeField"
value={task.timeField}
onChange={handleChange}
/>
<button id="start" onClick={startTimer}>
Start
</button>
<button id="stop" onClick={stopTimer}>
Stop
</button>
</main>
);
};
ये रहा डेमो: https://codesandbox.io/ s/crisil-forked-pfrb3?file=/src/TestComponentNew.js
EDITED
export const TestComponentNew = (props) => {
const [task, setTask] = useState({ taskName: "", timeField: 0 });
const timer = useRef();
useEffect(() => {
return () => stopTimer();
}, []);
const startTimer = () => {
timer.current = setInterval(function () {
setTask((v) => ({ ...v, timeField: +v.timeField + 1 }));
}, 1000);
};
const stopTimer = () => {
clearInterval(timer.current);
timer.current = null;
props.saveTask(task);
setTask({ taskName: "", timeField: 0 });
};
const handleChange = (e) => {
setTask((prevState) => ({
...prevState,
[e.target.id]: e.target.value
}));
};
const handlePause = () => {
clearInterval(timer.current);
};
return (
<main>
<input
type="text"
id="taskName"
value={task.taskName}
onChange={handleChange}
placeholder="task name"
/>
<input
type="number"
id="timeField"
value={task.timeField}
onChange={handleChange}
onFocus={handlePause}
onBlur={startTimer}
/>
<button id="start" onClick={startTimer}>
Start
</button>
<button id="stop" onClick={stopTimer}>
Stop
</button>
</main>
);
};
1
Taghi Khavari
15 जिंदा 2021, 10:28
बहुत बहुत धन्यवाद...आप काफी करीब लग रहे हैं....हालांकि, बस कुछ बिंदु...मुझे दूसरे टाइमर टेक्स्टबॉक्स में प्रदर्शित होने के लिए समय/गणना की आवश्यकता है...मुझे फोकस और ब्लर इवेंट की आवश्यकता है यह दूसरा टाइमर टेक्स्टबॉक्स है और फोकस पर रोकना/फोकस करना चाहता है और ब्लर पर टाइमर फिर से शुरू करना चाहता है ... साथ ही, जब स्टॉप पर क्लिक किया जाता है, तो नाम और समय को रेडक्स स्टोर में सहेजा जाना चाहिए और टाइमर आई/पी बॉक्स शून्य पर वापस जाना चाहिए
– copenndthagen
14 जिंदा 2021, 20:07
–
copenndthagen
14 जिंदा 2021, 20:09
तो, अनिवार्य रूप से... टाइमर इनपुट बॉक्स के लिए राज्य प्रबंधन के बारे में थोड़ा भ्रमित... क्या आपके कोड के अनुसार मान {task.timeField} या {सेकंड} पर सेट किया जाएगा? <इनपुट प्रकार = "संख्या" आईडी = "टाइमफिल्ड" मान = {टास्क.टाइमफिल्ड} ऑन चेंज = {हैंडल चेंज} />
– copenndthagen
14 जिंदा 2021, 20:21
मुझे ठीक से समझ नहीं आया कि
– timeField input का क्या मतलब है, इसलिए मैं डेमो को थोड़ा बदल देता हूं, क्या आपका मतलब यह है? codesandbox.io/s/crisil-forked-pfrb3?file =/src/…
Taghi Khavari
14 जिंदा 2021, 20:54
तो..इनपुट बॉक्स सेकंड दिखाएगा ... और स्टॉप बीटीएन क्लिक पर, मैं चाहता हूं कि कार्य का नाम (पहला बॉक्स) और सेकंड/टाइमर (दूसरा बॉक्स) मेरी वर्तमान स्थिति के हिस्से के रूप में नीचे प्रदर्शित हो ...
– copenndthagen
14 जिंदा 2021, 20:59