类组件

1. 回调函数

   class Foo extends Component { 
   handleInput = (input) => {
    this.input = input;
   }
   onClick = () => {
    this.input.focus();
   }
   render() {
    return (
      <div>
        <input type="text" ref={this.handleInput} />
        <button onClick={this.onClick}>聚集</button>
      </div>
    )
   }
   }

2. 使用 createRef （推荐写法）

   class Foo extends Component {
   inputRef = createRef();
   onClick = () => {
    this.inputRef.current.focus();
   }
    render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.onClick}>聚集</button>
      </div>
    )
   }
   }

3. 父组件可以操作子组件的 Ref

   const App = props => {
   const FooRef = createRef();
   const onClick = () => {
      FooRef.current.onClick(); // 执行子组件(类组件)上的 onClick 方法
   }
    return (
      <div>
        <Foo ref={FooRef}/>
      <button onClick={onClick}>父组件</button>
    </div>
   )
   }

   函数组件 useRef

   const Foo = props => {
    const inputRef = useRef();
    const onClick = () => {
      inputRef.current.focus();
   }
   return (
      <div>
      <input type="text" ref={inputRef} />
      <button onClick={onClick}>聚集</button>
    </div>
   )
   }