ReactJS：如何访问子组件的引用？

IT技术 coffeescript reactjs
2021-05-01 13:12:04

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

{ 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()

那我该怎么做呢？

3个回答

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

你可以链接 refs，所以如果你通过 ref 拉一个元素，你可以在该元素内抓取 refs：

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

会让你然后抓住输入@refs.inner.refs.myInput.getDOMNode()来调用focus。

在这种情况下，解决方案很简单，您可以将输入设置为自动对焦，在 React 中它会在渲染时对其进行对焦。

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

一般来说，你应该将一个 prop 传递给 Inner 组件，在componentDidUpdate 中你可以这样做：

if @props.something
    @refs.myInput.getDOMNode().focus()
其它你可能感兴趣的问题
上一篇找不到酶适配器react 16 的声明文件？ 下一篇使用react图标时导入错误