ReactJS: बाल घटक के रेफरी तक कैसे पहुंचे?

Question

मैं कॉफीस्क्रिप्ट में कोड लिख रहा हूं क्योंकि मैं इसके साथ प्रतिक्रिया लिख ​​रहा हूं।
यहां बुनियादी संरचना है।

{ div, input } = React.DOM 

Outer = React.createClass 
    render: -> 
    div { id: 'myApp' }, 
     Inner() 

Inner = React.createClass 
    render: -> 
    input { id: 'myInput', ref: 'myInput' } 

मैं जो एक शॉर्टकट दबाकर शुरू हो रहा है मेरी बाहरी वर्ग पर एक toggle विधि है। यह मेरे ऐप की दृश्यता को टॉगल करता है।
जब मेरे एप्लिकेशन दिखाई को छिपे हुए से चालू किए जाने पर, मैं इनपुट पर ध्यान केंद्रित करना चाहते हैं।

Outer = React.createClass 
    render: -> 
    ...... 

    hide: -> 
    @setState { visible: no } 

    show: -> 
    @setState { visible: yes } 

    $('#myInput').focus() # jQuery 
    # I want to do something like 
    # @refs.myInput.getDOMNode().focus() 
    # But @refs here is empty, it doesn't contain the refs in Inner 

    toggle: -> 
    if @state.visible 
     @hide() 
    else 
     @show() 

मैं इस तो क्या करते हो:

अब टॉगल तरीकों को और अधिक या इसके जैसे नहीं लग रही है?

Answer 1

refs को refs से बचने के बाद refs को घटक के एपीआई का हिस्सा नहीं माना जाता है। इसके बजाय आपको लगता है कि एक माता पिता के घटक द्वारा कहा जा सकता है, बुला यह focus मतलब हो सकता है Inner पर एक समारोह का पर्दाफाश करना चाहिए।

इसके अलावा, componentDidUpdate में तत्व ध्यान केंद्रित सुनिश्चित करने के लिए प्रतिपादन पूरा हो गया है:

{ div, input } = React.DOM 

Outer = React.createClass 
    render: -> 
    div { id: 'myApp' }, 
     Inner({ref: 'inner'}) 

    componentDidUpdate: (prevProps, prevState) -> 
    # Focus if `visible` went from false to true 
    if (@state.visible && !prevState.visible) 
     @refs.inner.focus() 

    hide: -> 
    @setState { visible: no } 

    show: -> 
    @setState { visible: yes } 

    toggle: -> 
    if @state.visible 
     @hide() 
    else 
     @show() 

Inner = React.createClass 
    focus: -> 
    @refs.myInput.getDOMNode().focus() 

    render: -> 
    input { id: 'myInput', ref: 'myInput' } 

Answer 2

इस मामले समाधान सरल है में, आप ऑटोफोकस के लिए इनपुट, जिसमें प्रतिक्रिया यह केंद्रित है जब यह प्रदान की गई है बता सकते हैं।

Inner = React.createClass 
    render: -> 
    input { ref: 'myInput', autoFocus: true } 

सामान्य तौर पर, आप इनर घटक के लिए एक आधार के पास करना चाहिए, और componentDidUpdate में आप कर सकते हैं:

if @props.something 
    @refs.myInput.getDOMNode().focus() 

Answer 3

आप कर सकते हैं श्रृंखला refs, इसलिए यदि आप रेफरी द्वारा एक तत्व खींच, आप कर सकते हैं

Outer = React.createClass render: -> div { id: 'myApp' }, Inner {ref: 'inner'}

के रूप में अपने Outer वर्ग को परिभाषित करते हैं: कि तत्व के अंदर हड़पने refs फिर आप focus पर कॉल करने के लिए @refs.inner.refs.myInput.getDOMNode() के साथ इनपुट को पकड़ें।