请注意，这些答案对我来说都没有用material-ui TextField组件。如何将焦点设置为一个materialUI TextField?我费了好大劲才让它起作用:

const focusUsernameInputField = input => {
  if (input) {
    setTimeout(() => {input.focus()}, 100);
  }
};

return (
  <TextField
    hintText="Username"
    floatingLabelText="Username"
    ref={focusUsernameInputField}
  />
);

您可以将该方法调用放在呈现函数中。或者在生命周期方法中，componentDidUpdate

你应该在componentDidMount和refs回调中做。就像这样

componentDidMount(){
   this.nameInput.focus(); 
}

class App extends React.Component{ componentDidMount(){ this.nameInput.focus(); } render() { return( <div> <input defaultValue="Won't focus" /> <input ref={(input) => { this.nameInput = input; }} defaultValue="will focus" /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> <div id="app"></div>

使用React Hooks / Functional组件和Typescript，你可以使用useRef钩子和HTMLInputElement作为useRef的泛型参数:

import React, { useEffect, useRef } from 'react';

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

    useEffect(() => {
        inputReference.current?.focus();
    }, []);

    return (
        <div>
            <input ref={inputReference} />
        </div>
    );
}

或者如果使用reactstrap，将inputReference提供给innerRef而不是ref:

import React, { useEffect, useRef } from 'react';
import { Input } from 'reactstrap';

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

    useEffect(() => {
        inputReference.current?.focus();
    }, []);

    return (
        <div>
            <Input innerRef={inputReference} />
        </div>
    );
}

这不再是最好的答案。从v0.13开始，这个。在某些奇怪的情况下，refs可能在AFTER componentDidMount()运行之前不可用。

只需将autoFocus标签添加到输入字段，如上面的FakeRainBrigand所示。

@Dhiraj的答案是正确的，为了方便，你可以使用自动对焦道具在安装时自动对焦:

<input autoFocus name=...

注意，在jsx中，它是自动聚焦(大写F)，不像普通的旧html是不区分大小写的。