我在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()
那我该怎么做?
答案 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()