ReactJS : 하위 구성 요소의 참조에 액세스하는 방법?

Question

필자는 React를 작성한 이후로 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은 구성 요소 API의 일부로 간주되지 않으므로 하위의 refs에 액세스하면 캡슐화가 중단됩니다. 대신 부모 구성 요소에서 호출 할 수있는 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

이 경우 솔루션은 간단합니다. 입력시 자동으로 초점을 맞출 수 있습니다. 자동 초점에서는 렌더링시 초점을 맞 춥니 다. 일반적으로

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

, 당신은 내부 구성 요소에 소품을 통과해야하고, componentDidUpdate에 당신은 할 수 있습니다 : 체인 심판은 심판에 의해 요소를 당기면

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

Answer 3

당신이 할 수있는, 그래서 당신이 할 수있는

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

로 Outer 클래스를 정의하는 것은 할 것이다 : 그 요소 내부 잡아 심판 @refs.inner.refs.myInput.getDOMNode()을 입력하여 focus에 전화를 겁니다.