Refs例子 - React

方法一：

1. 为 DOM 元素添加 Ref

import React, { PureComponent, Fragment } from "react";

 class RefsAndDOM extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleFocus = () => {
    this.myRef.current.focus();
  };

  render() {
    return (
      <Fragment>
        <input type="text" ref={this.myRef} />
        <input type="button" value="focus" onClick={this.handleFocus} />
      </Fragment>
    );
  }
}

export default RefsAndDOM;

2. 为类组件添加 Ref 

import React, { PureComponent, Fragment } from "react";

class CustomInput extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleFocus = () => {
    this.myRef.current.focus();
  };

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

class RefsAndDOM extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleFocus = () => {
    this.myRef.current.handleFocus();
  };

  render() {
    return (
      <Fragment>
        <CustomInput ref={this.myRef} />
        <input type="button" value="focus" onClick={this.handleFocus} />
      </Fragment>
    );
  }
}

export default RefsAndDOM;

方法二：回调Refs （推荐使用）

1. 为 DOM 元素添加 Ref

import React, { PureComponent, Fragment } from "react";

class RefsAndDOM extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

  setMyRef = element => {
    this.myRef = element;
  };

  focusMyRef = () => {
    if (this.myRef) {
      this.myRef.focus();
    }
  };

  render() {
    return (
      <Fragment>
        <input type="text" ref={this.setMyRef} />
        <input type="button" value="focus" onClick={this.focusMyRef} />
      </Fragment>
    );
  }
}

export default RefsAndDOM;

 2. 为类组件添加 Ref

import React, { PureComponent, Fragment } from "react";

class CustomInput extends PureComponent {
  render() {
    const { inputRef } = this.props;
    return <input type="text" ref={inputRef} />;
  }
}

class RefsAndDOM extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

  setMyRef = element => {
    this.myRef = element;
  };

  focusMyRef = () => {
    if (this.myRef) {
      this.myRef.focus();
    }
  };

  render() {
    return (
      <Fragment>
        <CustomInput inputRef={this.setMyRef} />
        <input type="button" value="focus" onClick={this.focusMyRef} />
      </Fragment>
    );
  }
}

export default RefsAndDOM;