ReactJS:如何访问子组件的引用?

时间:2014-06-21 08:15:36

标签: coffeescript reactjs

我在CoffeeScript中编写代码,因为我一直在用它编写React 这是基本结构。

{ div, input } = React.DOM

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

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

我的Outer类上有一个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()

那我该怎么做?

3 个答案:

答案 0 :(得分:25)

访问子集的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' }

答案 1 :(得分:3)

你可以链接引用,所以如果你通过引用拉一个元素,你可以在该元素中获取引用:

将您的Outer课程定义为 Outer = React.createClass render: -> div { id: 'myApp' }, Inner {ref: 'inner'}

然后您可以使用@refs.inner.refs.myInput.getDOMNode()获取输入以致电focus

答案 2 :(得分:2)

在这种情况下,解决方案很简单,您可以将输入告诉自动对焦,React在渲染时对其进行聚焦。

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

一般情况下,您应该将道具传递给内部组件,并在componentDidUpdate中执行:

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