Qual é a maneira de reagir ao definir o foco em um campo de texto específico depois que o componente é renderizado?

A documentação parece sugerir o uso de referências, por exemplo:

Defina ref="nameInput"no meu campo de entrada na função renderizar e chame:

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

Mas onde devo chamar isso? Eu tentei alguns lugares, mas não consigo fazê-lo funcionar.

Você deve fazê-lo componentDidMounte em refs callbackvez disso. Algo assim

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>

A resposta de @ Dhiraj está correta e, por conveniência, você pode usar o suporte autoFocus para que uma entrada foque automaticamente quando montada:

<input autoFocus name=...

Observe que no jsx é autoFocus(maiúscula F) diferente do html antigo simples, que não diferencia maiúsculas de minúsculas.

No React 0.15 , o método mais conciso é:

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

Foco na montagem

Se você deseja apenas focar um elemento quando ele é montado (renderizado inicialmente), basta usar o atributo autoFocus.

<input type="text" autoFocus />

Foco dinâmico

Para controlar o foco dinamicamente, use uma função geral para ocultar os detalhes da implementação de seus componentes.

React 16.8 + Componente funcional - useFocus hook

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 ] 
}

Demonstração completa

React 16.3 + Componentes da classe - utilizeFocus

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} 
}

Demonstração completa

Se você quiser apenas fazer o foco automático no React, é simples.

<input autoFocus type="text" />

Embora se você quiser apenas saber onde colocar esse código, a resposta está em componentDidMount ().

v014.3

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

Na maioria dos casos, você pode anexar uma referência ao nó DOM e evitar o uso de findDOMNode.

Leia os documentos da API aqui: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

O React 16.3 adicionou uma nova maneira conveniente de lidar com isso, criando uma ref no construtor do componente e use-o como abaixo:

class MyForm extends Component {
  constructor(props) {
      super(props);

      this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focus(); // one important change here is that we need to access the element via current.
  }

  render() {
    // instead of using arrow function, the created ref can be used directly.
    return(
      <div>
        <input ref={this.textInput} />
      </div>
    );
  }
}

Para mais detalhes, você pode conferir este artigo no blog React.

Atualizar:

A partir do React 16.8 , o useRefhook pode ser usado nos componentes de função para obter o mesmo resultado:

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

const MyForm = () => {
  const textInput = useRef(null);

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

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

Acabei de encontrar este problema e estou usando o react 15.0.1 15.0.2 e estou usando a sintaxe ES6 e não obtive o que precisava das outras respostas desde que a v.15 caiu semanas atrás e algumas das this.refspropriedades foram preteridos e removidos .

Em geral, o que eu precisava era:

1. Focalize o primeiro elemento de entrada (campo) quando o componente for montado
2. Focalize o primeiro elemento de entrada (campo) com um erro (após o envio)

Estou a usar:

• Reagir recipiente / componente de apresentação
• Restaurado
• React-Router

Focar o primeiro elemento de entrada

Eu usei autoFocus={true}o primeiro <input />na página para que, quando o componente for montado, ele tenha foco.

Focar o primeiro elemento de entrada com um erro

Isso levou mais tempo e foi mais complicado. Estou mantendo fora do código que não é relevante para a solução por questões de brevidade.

Loja / Estado Redux

Eu preciso de um estado global para saber se devo definir o foco e desabilitá-lo quando foi definido, para não continuar redefinindo o foco quando os componentes forem renderizados novamente (usarei componentDidUpdate()para verificar a definição do foco. )

Isso pode ser projetado da maneira que você achar melhor para sua aplicação.

{
    form: {
        resetFocus: false,
    }
}

Componente Container

O componente precisará ter a resetfocuspropriedade definida e um callBack para limpar a propriedade, se acabar definindo o foco em si mesmo.

Observe também que organizei meus Action Creators em arquivos separados, principalmente devido ao meu projeto ser bastante grande e que eu queria dividi-los em partes mais gerenciáveis.

import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';

function mapStateToProps(state) {
    return {
        resetFocus: state.form.resetFocus
    }
}

function mapDispatchToProps(dispatch) {
    return {
        clearResetFocus() {
            dispatch(ActionCreator.clearResetFocus());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyField);

Componente de apresentação

import React, { PropTypes } form 'react';

export default class MyField extends React.Component {
    // don't forget to .bind(this)
    constructor(props) {
        super(props);
        this._handleRef = this._handleRef.bind(this);
    }

    // This is not called on the initial render so
    // this._input will be set before this get called
    componentDidUpdate() {
        if(!this.props.resetFocus) {
            return false;
        }

        if(this.shouldfocus()) {
            this._input.focus();
            this.props.clearResetFocus();
        }
    }

    // When the component mounts, it will save a 
    // reference to itself as _input, which we'll
    // be able to call in subsequent componentDidUpdate()
    // calls if we need to set focus.
    _handleRef(c) {
        this._input = c;
    }

    // Whatever logic you need to determine if this
    // component should get focus
    shouldFocus() {
        // ...
    }

    // pass the _handleRef callback so we can access 
    // a reference of this element in other component methods
    render() {
        return (
            <input ref={this._handleRef} type="text" />
        );
    }
}

Myfield.propTypes = {
    clearResetFocus: PropTypes.func,
    resetFocus: PropTypes.bool
}

Visão geral

A ideia geral é que cada campo de formulário que possa ter um erro e ser focado precise se verificar e se precisar definir o foco em si mesmo.

Há uma lógica comercial que precisa acontecer para determinar se o campo especificado é o campo certo para definir o foco. Isso não é mostrado porque dependerá do aplicativo individual.

Quando um formulário é enviado, esse evento precisa definir o sinalizador de foco global resetFocuscomo true. Então, à medida que cada componente se atualiza, ele verifica se obtém o foco e, se obtém, despacha o evento para redefinir o foco para que outros elementos não precisem continuar verificando.

edit Como observação, eu tinha minha lógica de negócios em um arquivo "utilitários" e acabei de exportar o método e o chamei em cada shouldfocus()método.

Felicidades!

Os documentos do React agora têm uma seção para isso. https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

 render: function() {
  return (
    <TextInput
      ref={function(input) {
        if (input != null) {
          input.focus();
        }
      }} />
    );
  },

Esta não é mais a melhor resposta. A partir da v0.13, this.refspode não estar disponível até APÓS a componentDidMount()execução, em alguns casos estranhos.

Basta adicionar a autoFocustag ao seu campo de entrada, como o FakeRainBrigand mostrou acima.

Ref. Comentário de @ Dave na resposta de @ Dhiraj; uma alternativa é usar a funcionalidade de retorno de chamada do atributo ref no elemento que está sendo renderizado (depois que um componente é renderizado pela primeira vez):

<input ref={ function(component){ React.findDOMNode(component).focus();} } />

Mais informações

Esta é a maneira correta, como focar automaticamente. Quando você usa retorno de chamada em vez de sequência como valor ref, ele é chamado automaticamente. Você conseguiu sua referência disponível, sem a necessidade de tocar no DOM usandogetDOMNode

render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

Observe que nenhuma dessas respostas funcionou para mim com um componente TextField da interface do usuário . Por Como definir o foco para um materialUI TextField? Eu tive que pular algumas etapas para fazer isso funcionar:

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

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

Você pode colocar essa chamada de método dentro da função de renderização. Ou dentro do método do ciclo de vida,componentDidUpdate

Você não precisa getInputDOMNode? nesse caso...

Basta obter o refe focus()quando o componente é montado - componentDidMount ...

import React from 'react';
import { render } from 'react-dom';

class myApp extends React.Component {

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

  render() {
    return(
      <div>
        <input ref={input => { this.nameInput = input; }} />
      </div>
    );
  }

}

ReactDOM.render(<myApp />, document.getElementById('root'));

O AutoFocus funcionou melhor para mim. Eu precisava alterar algum texto para uma entrada com esse texto em clique duplo, então foi assim que eu acabei:

<input autoFocus onFocus={this.setCaretToEnd} value={this.state.editTodo.value} onDoubleClick={this.updateTodoItem} />

NOTA: Para corrigir o problema em que o React coloca o cursor no início do texto, use este método:

setCaretToEnd(event) {
    var originalText = event.target.value;
    event.target.value = '';
    event.target.value = originalText;
}

Encontre aqui: https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js

Eu tenho o mesmo problema, mas também tenho algumas animações, então meu colega sugere usar window.requestAnimationFrame

este é o atributo ref do meu elemento:

ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}

Aviso: ReactDOMComponent: não acessa .getDOMNode () de um nó DOM; em vez disso, use o nó diretamente. Este nó DOM foi renderizado por App.

Deveria estar

componentDidMount: function () {
  this.refs.nameInput.focus();
}

A resposta mais simples é adicionar ref = "some name" no elemento de entrada de texto e chamar a função abaixo.

componentDidMount(){
   this.refs.field_name.focus();
}
// here field_name is ref name.

<input type="text" ref="field_name" />

Para mover o foco para um elemento recém-criado, você pode armazenar o ID do elemento no estado e usá-lo para definir autoFocus. por exemplo

export default class DefaultRolesPage extends React.Component {

    addRole = ev => {
        ev.preventDefault();
        const roleKey = this.roleKey++;
        this::updateState({
            focus: {$set: roleKey},
            formData: {
                roles: {
                    $push: [{
                        id: null,
                        name: '',
                        permissions: new Set(),
                        key: roleKey,
                    }]
                }
            }
        })
    }

    render() {
        const {formData} = this.state;

        return (
            <GridForm onSubmit={this.submit}>
                {formData.roles.map((role, idx) => (
                    <GridSection key={role.key}>
                        <GridRow>
                            <GridCol>
                                <label>Role</label>
                                <TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
                            </GridCol>
                        </GridRow>
                    </GridSection>
                ))}
            </GridForm>
        )
    }
}

Dessa forma, nenhuma das caixas de texto fica focada no carregamento da página (como eu quero), mas quando você pressiona o botão "Adicionar" para criar um novo registro, esse novo registro fica focado.

Como autoFocusnão "roda" novamente, a menos que o componente seja remontado, não preciso me preocupar em desabilitar this.state.focus(ou seja, ele não continuará roubando o foco de volta à medida que atualizo outros estados).

Leia quase toda a resposta, mas não viu uma getRenderedComponent().props.input

Defina suas referências de entrada de texto

this.refs.username.getRenderedComponent().props.input.onChange('');

Depois de tentar muitas opções acima sem sucesso, descobri que era como era disablinge depois enablinga entrada que causou a perda do foco.

Eu tinha um suporte sendingAnswerque desabilitaria a entrada enquanto eu estava pesquisando o backend.

<Input
  autoFocus={question}
  placeholder={
    gettingQuestion ? 'Loading...' : 'Type your answer here...'
  }
  value={answer}
  onChange={event => dispatch(updateAnswer(event.target.value))}
  type="text"
  autocomplete="off"
  name="answer"
  // disabled={sendingAnswer} <-- Causing focus to be lost.
/>

Depois que removi o suporte desativado, tudo começou a funcionar novamente.

Versão atualizada você pode conferir aqui

componentDidMount() {

    // Focus to the input as html5 autofocus
    this.inputRef.focus();

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

Como existem várias razões para esse erro, pensei em publicar também o problema que estava enfrentando. Para mim, o problema era que eu renderizei minhas entradas como conteúdo de outro componente.

export default ({ Content }) => {
  return (
  <div className="container-fluid main_container">
    <div className="row">
      <div className="col-sm-12 h-100">
        <Content />                                 // I rendered my inputs here
      </div>
    </div>
  </div>
  );
}

Foi assim que chamei o componente acima:

<Component Content={() => {
  return (
    <input type="text"/>
  );
}} />

De acordo com a sintaxe atualizada, você pode usar this.myRref.current.focus()