पता लगाएं कि इनपुट तत्व ReactJS

Question

के भीतर केंद्रित है या नहीं, मैं कैसे पता लगा सकता हूं कि वर्तमान में इनपुट तत्व एक ReactJS रेंडर फ़ंक्शन के भीतर केंद्रित है या नहीं?

<input type="text" style={searchBoxStyle} placeholder="Search"></input> 

Answer 1

जब तक यह किसी भी समय की तरह कुछ चला सकते हैं के रूप में इनपुट नोड लगाया गया है और वहाँ यह करने के लिए एक संदर्भ है:

const ReactDOM = require('react-dom') 

if (document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput)) 

आप इनपुट तत्व के लिए एक संदर्भ जोड़ना होगा:

<input ref="searchInput" ... 

आपको render विधि में ऐसा नहीं करना चाहिए, क्योंकि इनपुट नोड अभी तक आरोहित नहीं किया जा सकता है। componentDidUpdate या componentDidMount जैसे जीवन चक्र विधि का उपयोग करें।

एक और तरीका है इनपुट क्षेत्र के अंदर focus और blur घटनाओं के लिए घटना श्रोताओं को जोड़ने के लिए होगा:

<input type="text" onFocus={this.onFocus} onBlur={this.onBlur}... 

तो संचालकों में राज्यों की स्थापना की और विधि प्रस्तुत करना में है कि राज्य की जाँच करें।

onBlur: function() { 
    this.setState({ focused: false }) 
}, 
onFocus: function() { 
    this.setState({ focused: true }) 
}, 
render: function() { 
    if (this.state.focused) { 
     // do something 
    } 
    <input onFocus={this.onFocus} onBlur={this.onBlur}... 
} 

ध्यान दें कि यह कॉल करेंगे उन्हें हर बार नोड ध्यान केंद्रित या धुंधली होती फिर से प्रस्तुत करना (, सही लेकिन आप यही चाहते है?)

Answer 2

मैं डेविड, जहां के द्वारा दिए गए जवाब के साथ शुरू कर दिया है कि वह दो विधियों का वर्णन है, और वे दोनों मेरे लिए काम किया, लेकिन मैं दोनों के बारे में चिंताओं था:

1. पहला मामला यह findDOMNode का उपयोग करता है, क्या कुछ नुकसान है पर: कम से कम इसके उपयोग को हतोत्साहित किया जाता है, और यह आसानी से किया जा सकता है इस तरह से लागू किया गया है कि इसे एक विरोधी पैटर्न माना जाता है; और यह आभासी डीओएम को छोड़कर और सीधे डीओएम के साथ काम करके कोड को धीमा कर सकता है।

2. दूसरे विकल्प पर, केवल यह पता लगाने के लिए एक घटक स्थिति बनाएं और प्रबंधित करें कि उत्तर बहुत अधिक काम लगता है, आसानी से सिंक से बाहर हो सकता है, और घटक को अनावश्यक रूप से फिर से प्रस्तुत करने का कारण बन सकता है।

तो अधिक मुद्दा मैं निम्नलिखित समाधान के साथ आया था का पता लगाने की कोशिश कर रहा:

if (this.props.id === document.activeElement.id) { 
    // your code goes here 
} 

डेविड के जवाब पर ही टिप्पणी लागू होता है:

आप में ऐसा नहीं करना चाहिए यद्यपि विधि प्रस्तुत करें, क्योंकि इनपुट नोड अभी तक आरोहित नहीं किया जा सकता है। एक लाइफसाइकिल विधि का उपयोग करें जैसे घटकडिडअपडेट या घटकडिडमाउंट।

लाभ:

• वर्तमान घटक गुण (अपरिवर्तनीय मान हैं क्या)
• राज्य प्रबंधन की आवश्यकता नहीं है, और इसलिए का कारण नहीं बनेगा उपयोग करता अनावश्यक फिर से प्रतिपादन
• डॉन ' टी को डीओएम ट्रांसवर्सिंग की आवश्यकता नहीं है, इसलिए प्रदर्शन
• को घटक संदर्भ

बनाने की आवश्यकता नहीं है

आवश्यकताएँ:

• अपने घटक होना चाहिए और id संपत्ति है कि आप जाँच करना चाहते प्रपत्र तत्व को पारित कर दिया है