प्रतिक्रिया

Question

के साथ डेटाटाइम-स्थानीय का मूल्य मैं प्रतिक्रिया के साथ अपना पहला प्रोजेक्ट कर रहा हूं और मैंने सामान्य प्रतिक्रिया तर्क का उपयोग करके डेटाटाइम-स्थानीय फ़ील्ड का उपयोग करने के तरीके में एक दीवार मारा है।

किसी दिए गए इनपुट फ़ील्ड के लिए मैं React documentation में निर्देशित करता हूं।

मेरे लिए मुद्दा यह है कि डेटाटाइम-स्थानीय क्षेत्र में कुछ कष्टप्रद वापसी-मूल्य हैं। यह दो मामलों में एक खाली स्ट्रिंग देता है। एक मामला तब होता है जब आप अंतर्निहित स्पष्ट बटन का उपयोग करते हैं और दूसरा मामला तब होता है जब यह किसी अमान्य तिथि पर सेट होता है - उदाहरण के लिए 2 9 फरवरी 2015.

चूंकि यह मामला सिर्फ मूल्य का मूल्य निर्धारित नहीं कर सकता फ़ील्ड event.target.value के मान के बराबर है, क्योंकि जब भी कोई अमान्य दिनांक हिट करता है तो वह फ़ील्ड रीसेट करेगा। यदि मैं खाली वापसी मूल्य का सामना करते समय कुछ भी करने के लिए कहता हूं जिसका अर्थ है कि आप अब मैदान पर स्पष्ट बटन का उपयोग नहीं कर सकते हैं।

मैं इस मुद्दे से संबंधित कुछ भी नहीं ढूंढ पाया है, इसलिए मुझे उम्मीद है कि यहां किसी को हल करने का विचार है।

Answer 1

मैंने "मूल्य" के बजाय जेएसएक्स "डिफ़ॉल्ट वैल्यू" विशेषता का उपयोग कर मूल्य निर्धारित करके इसे हल कर लिया है।

यह परिणाम राज्य चर द्वारा लॉक नहीं किया जा रहा है जो बदले में मेरे लिए एक चालू समारोह बनाना संभव बनाता है जो हमेशा राज्य को अद्यतन करता है लेकिन क्षेत्र पर इसका कोई प्रभाव नहीं पड़ता है।

ऐसा करके क्षेत्र अपेक्षा के अनुसार व्यवहार करता है और मैं बस अपने राज्य में जो भी मूल्य वर्तमान में जमा कर सकता हूं।

इस तरह इसे हल करने के लिए नकारात्मक पक्ष यह है कि मैं तिथि को सत्यापित करने में सक्षम नहीं हूं। जिसका अर्थ है कि अगर कोई अमान्य तिथि जमा करने का प्रयास करता है तो इसे डेटाबेस में शून्य के रूप में संग्रहीत किया जाएगा।

यदि कोई अधिक सुरुचिपूर्ण समाधान के साथ आता है तो मुझे यह सुनकर खुशी होगी।

Answer 2

<input 
    type="datetime-local" 
    value={this.state.datetime} 
    onChange={e => this.handleChange('datetime', e)} 
    /> 

चूंकि इसका एक नियंत्रित घटक आपको पढ़ने के लिए एक राज्य मूल्य निर्धारित करना है। मैं बहुत की तरह राज्य में वर्तमान दिनांक ...

state = { 
     datetime: `${new Date().getFullYear()}-${`${new Date().getMonth() + 
     1}`.padStart(2, 0)}-${`${new Date().getDay() + 1}`.padStart(
     2, 
     0 
    )}T${`${new Date().getHours()}`.padStart(
     2, 
     0 
    )}:${`${new Date().getMinutes()}`.padStart(2, 0)}` 
    }; 

सेट और मेरे handleChange तो जैसे अन्य पाठ इनपुट के लिए reuable है:

handleChange = (field, e) => { 
    this.setState({ [field]: e.target.value }); 
    };