¿Cómo establecer el foco en un campo de entrada después de renderizar?

¿Cuál es la forma de reacción para establecer el foco en un campo de texto en particular después de renderizar el componente?

La documentación parece sugerir el uso de referencias, por ejemplo:

Establezca ref="nameInput"en mi campo de entrada en la función de renderizado y luego llame a:

this.refs.nameInput.getInputDOMNode().focus(); 

¿Pero dónde debería llamar a esto? Lo he probado en algunos lugares pero no consigo que funcione.

Mar 06 '15 06:03 Dave

Deberías hacerlo en componentDidMounty en refs callbacksu lugar. Algo como esto

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>

Mar 06 '2015 00:03 Dhiraj

Centrarse en el montaje

Si solo desea enfocar un elemento cuando se monta (inicialmente renderiza), bastará con un simple uso del atributo autoFocus.

<input type="text" autoFocus />

Enfoque dinámico

para controlar el foco dinámicamente utilice una función general para ocultar los detalles de implementación de sus componentes.

React 16.8 + Componente funcional: use el gancho Focus

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               Focus
            </button>
            <input ref={inputRef} />
        </>
    )
    
}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

Demostración completa

React 16.3 + Componentes de clase - utiliceFocus

class App extends Component {
  constructor(props){
    super(props)
    this.inputFocus = utilizeFocus()
  }

  render(){
    return (
      <> 
          <button onClick={this.inputFocus.setFocus}>
             Focus
          </button>
          <input ref={this.inputFocus.ref}/>
      </>
    )
  } 
}

const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}

Demostración completa

Jan 12 '2019 12:01 Ben Carp

A partir de React 0.15 , el método más conciso es:

<input ref={input => input && input.focus()}/>

Oct 25 '2016 08:10 Ilya Semenov

Si solo quieres hacer enfoque automático en React, es simple.

<input autoFocus type="text" />

Mientras que si solo desea saber dónde colocar ese código, la respuesta está en componenteDidMount().

v014.3

componentDidMount() {
    this.refs.linkInput.focus()
}

En la mayoría de los casos, puede adjuntar una referencia al nodo DOM y evitar el uso de findDOMNode.

Lea los documentos de la API aquí: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

Dec 04 '2015 05:12 Jack Lee