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

前端之家收集整理的这篇文章主要介绍了react-bits:从父组件获取子组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>
    )
  }
}

猜你在找的React相关文章