ReactJS: Как получить доступ к реквизитам дочернего компонента?

Question

Я пишу код в CoffeeScript, так как я писал об этом.
Вот основная структура.

{ 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 не рассматривается как часть API-интерфейса компонента. Вместо этого вы должны выставить функцию на Inner, которая может быть вызвана родительским компонентом, вызвав ее focus.

Кроме того, фокус элемент в 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

В этом случае решение прост, вы можете указать ввод для автофокуса, который в React фокусирует его, когда он отображается.

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

В общем, вы должны пройти опору на внутренний компонент, и в componentDidUpdate вы можете сделать:

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

Answer 3

Вы можете цепи рефов, так что если вы тянете элемент по реф, вы можете захватить реф внутри этого элемента:

Определения вашего Outer класса как Outer = React.createClass render: -> div { id: 'myApp' }, Inner {ref: 'inner'}

пусть будет вы затем берете вход с @refs.inner.refs.myInput.getDOMNode(), чтобы позвонить по телефону focus.