react-bits：从父组件获取子组件

最新推荐文章于 2024-07-05 12:39:32 发布

Spider--Man

最新推荐文章于 2024-07-05 12:39:32 发布

阅读量931

点赞数

分类专栏： web前端文章标签： react ref parent child component

web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

本文介绍如何在React中通过Refs从父组件直接访问并操作子组件，例如使子组件的输入框自动获取焦点。子组件定义了一个可聚焦的输入框，而父组件则利用Ref调用子组件的focus()方法来实现这一功能。

摘要由CSDN通过智能技术生成

react-bits
原文

从父组件获取子组件
例如：操作父组件使子组件获取焦点

子组件
一个输入框，带focus()函数可以自动获取焦点

class Input extends Component {
  focus() {
    this.el.focus();
  }

  render() {
    return (
      <input
        ref={el=> { this.el = el; }}
      />
    );
  }
}

父组件
在父组件内，通过ref获取子组件，并可调用其focus()函数

class SignInModal extends Component {
  componentDidMount() {
    // Note that when you use ref on a component, it’s a reference to
    // the component (not the underlying element), so you have access to its methods.
    this.InputComponent.focus();
  }

  render() {
    return (
      <div>
        <label>User name:</label>
        <Input
          ref={comp => { this.InputComponent = comp; }}
        />
      </div>
    )
  }
}