How to use the react.createRef function in react

import './style.scss';

import {
  createAPIDefinition,
  createEventDefinition,
} from './../../../Api/APICreationHelper';

import APIDataForm from './../../../Api/Forms/ApiDataForm';
import CredentialsForm, {
  CREDENTIAL_TYPE_PLACEHOLDER,
} from '../../../Api/Forms/CredentialForms/CredentialsForm';

export default class CreateAPIModal extends React.Component {
  state = this.createInitialState();
  formRef = React.createRef();

  createInitialState() {
    return {
      isReadyToUpload: false,

      apiData: {
        name: '',
        description: '',
        group: '',
        targetURL: '',

        spec: null,
        actualFileType: null,
        loadedFileContent: null,
        mainAPIType: null /* API, EVENT_API, UNKNOWN */,
        apiSubType: null /* ASYNC_API, OPEN_API, ODATA */,

constructor(props){
        super(props)

        this.coverRef = React.createRef()
        this.isBrowsingControlled = this.props.hasOwnProperty('browsing')

        this.state = {
            // 浏览
            browsing: false,
        }

        // TODO:FEATURE 按钮颜色配置
        // TODO:FEATURE 移动端的拖拽翻页
        // TODO:ENHANCE 禁用移动端的滑动退出
        // TODO:BUG     移动端下左右按钮
    }

// selectedAnnoId: {id:undefined},
            selectedAnnoId: undefined,
            showSingleAnno: undefined,
            showLabelInput: false,
            imageLoaded: false,
            imgLabelIds: [],
            imgLabelChanged: false,
            performedImageInit: false,
            prevLabel: [],
            imageData: undefined,
            isJunk: false,
            imgBarVisible:false,
            annoToolBarVisible: false
        }
        this.img = React.createRef()
        this.svg = React.createRef()
        this.container = React.createRef()
        this.hist = new UndoRedo()
        this.keyMapper = new KeyMapper((keyAction) => this.handleKeyAction(keyAction))
        this.mousePos = undefined
    }

const DownloadPdfLink = React.lazy(() => import('./download-pdf-link.component'));

class TopNavRedesign extends React.PureComponent {
  state = {
    backgroundVisible: false,
    menuOpen: false
  };

  navLinkProps = {
    exact: false,
    strict: false,
    isActive: null
  };

  mobileMenuRef = React.createRef(null);

  componentDidMount() {
    // window.addEventListener('click', this.handleClickOutside);
    window.addEventListener('scroll', this.setBackground, { passive: true });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.page !== this.props.page && this.state.menuOpen) {
      this.handleToggleClick();
    }
  }

  componentWillUnmount() {
    this.setBackground.cancel();
    window.removeEventListener('click', this.handleClickOutside);
    window.removeEventListener('scroll', this.setBackground);

collectibles: PropTypes.array,
		/**
		 * Current provider ticker
		 */
		ticker: PropTypes.string,
		/**
		 * Current onboarding wizard step
		 */
		wizardStep: PropTypes.number
	};

	state = {
		refreshing: false
	};

	accountOverviewRef = React.createRef();

	mounted = false;

	async init() {
		const { AssetsDetectionController, AccountTrackerController } = Engine.context;
		AssetsDetectionController.detectAssets();
		AccountTrackerController.refresh();
		this.mounted = true;
	}

	componentDidMount() {
		requestAnimationFrame(() => {
			this.init();
		});
	}

descriptor: Delir.AnyParameterTypeDescriptor
    value: Delir.Entity.KeyframeValueTypes
    onChange: (desc: Delir.AnyParameterTypeDescriptor, value: Delir.Entity.KeyframeValueTypes) => void
}

export default class DelirValueInput extends React.PureComponent {
    public state = {
        value: this.props.value,
    }
    private ref = {
        numberInput: React.createRef(),
        propX: React.createRef(),
        propY: React.createRef(),
        propZ: React.createRef(),
        propWidth: React.createRef(),
        propHeight: React.createRef(),
        propDepth: React.createRef(),
        colorPicker: React.createRef(),
        checkbox: React.createRef(),
        textArea: React.createRef(),
        enumSelect: React.createRef(),
        assetSelect: React.createRef(),

        textSummary: React.createRef(),
        textInputDropdown: React.createRef(),

        colorPickerDropdown: React.createRef(),
    }

    public componentWillReceiveProps(nextProps: Readonly, nextContext: any) {
        if (this.props.value !== nextProps.value) {
            setTimeout(() => this.setState({ value: nextProps.value }), 0)

constructor(props)
    {
        super(props);

        this._inputElement = React.createRef();

        this._debounceTimeout = null;
        this._ignoreNextBlurEvent = false;

        this._prevCaretPosition = { start: -1, end: -1 };

        this.onFocus = this.onFocus.bind(this);
        this.onBlur = this.onBlur.bind(this);
    }

const data = resp.items.map(item => {
            this.nameRefs.push(React.createRef());
            const percentCount = Math.round((item.count / resp.count) * 100);
            return {...item, percentCount};
          });
          this.setState({data, loading: false});

constructor(props) {
    super(props);
    this.state = {
      barcodes: [],
    };
    const epConfig = getConfig();
    ({ intl } = epConfig);
    this.onDetected = this.onDetected.bind(this);
    this.onModalClose = this.onModalClose.bind(this);
    this.initScanner = this.initScanner.bind(this);
    this.stopScanning = this.stopScanning.bind(this);
    this.scannerContainer = React.createRef();
  }

import React, { Component } from 'react';
import './FormulaEditor.scss'

class FormulaEditor extends Component {
  inputRef = React.createRef();

  handleInputChange = (e) => {
    const {onChange} = this.props;

    onChange(e.target.value);
  }

  handleKeyDown = (e) => {
    const {onKeyDown} = this.props;

    onKeyDown(e);
  }

  focus() {
    this.inputRef.current.focus()
  }