如何在React中跨层次结构设置焦点

Question

在我的React聊天应用程序中，我有一个像这样的组件层次结构：

{{1}}

我想要的是当我按下ReplyButton时，焦点应设置为NewReply组件内的输入。任何人都可以向我解释如何在React中实现这一目标。我已经看到了一些示例，其中设置焦点的组件是输入的直接父级，但不在层次结构的不同部分。

谢谢， 弗兰克

Answer 1

您必须将click事件传递给父Reply组件，然后从那里调用焦点功能。所以你还需要将这个函数从Reply组件传递给这个孩子的每一个，直到ReplyButton组件

像

这样的东西

回复

focusNewReply() {
     this.replyInput.focus();
}

<强> ReplyMenu

focusNewReply() {
    this.props.focusNewReply();
}

<强> ReplyButton

<button onClick={()=>{this.props.focusNewReply()}}>

Answer 2

您是否尝试在输入上调用focus()？

  render(){
  const _this = this;
  <button onClick={() => _this.replyInput.focus()} />
}