你使用refs的方式不是最好的方式，或者它不再是最好的实践。尝试一些像这样的事情

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.current.focus();
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

• • 更新**

从React 16.3起，您可以使用**React.createRef()**API

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

从React 18.xx以上版本，您可以使用**useRef**挂钩

import React, { useRef } from "react";

export const Form = () => {
  const inputRef = useRef(null);

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <input type="button" value="Set Focus" onClick={focus} />
    </div>
  );
};

只需将自动对焦属性添加到input。（* 当然，在JSX中它是autoFocus*）

<input autoFocus ...

使用焦点挂钩

// General Focus Hook
const useFocus = (initialFocus = false, id = "") => {
    const [focus, setFocus] = useState(initialFocus)
    const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true)
    return ([
        setFocusWithTrueDefault, {
            autoFocus: focus,
            key: `${id}${focus}`,
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
        },
    ])
}

const FocusDemo = () => {

    const [labelStr, setLabelStr] = useState("Your initial Value")
    const [setFocus, focusProps] = useFocus(true)

    return (
        <> {/* React.Fragment */}
            <input
                onChange={(e)=> setLabelStr(e.target.value)}
                value={labelStr}
                {...focusProps}
            />
            <h3 onClick={setFocus}>{labelStr}</h3>
        </>
    )
    
}

获取更完整的click here演示。

除了前面的答案之外，我还添加了setTimeout以使其工作

handleClick() {

    if (this.searchInput) {
        setTimeout(() => {

            this.searchInput.focus();

        }, 100);
    }
}

其中，searchInput是输入的jsx ref

<input
      type="text"
      name="searchText"
      ref={(input) => { this.searchInput = input; }}
      placeholder="Search" />

handleClick()是任何元素的onClick处理程序

@BenCarp typescript 中的回答
将inputRef传递给input，然后调用setFocus将焦点设置到它。

export const useInputFocus = (): [MutableRefObject<HTMLInputElement | undefined>, () => void] => {
  const inputRef = useRef<HTMLInputElement>();
  const setFocus = (): void => {
    const currentEl = inputRef.current;
    if (currentEl) {
      currentEl.focus();
    }
  };
  return [inputRef, setFocus];
};

每次更新组件时使用componentDidUpdate方法

componentDidUpdate(prevProps, prevState) {
     this.input.focus();
}

您可以使用“useRef”钩子并引用输入控件，然后使用reference.current.focus()