Qual è il modo di reagire per mettere a fuoco un particolare campo di testo dopo il rendering del componente?

La documentazione sembra suggerire l'uso di refs, ad esempio:

Impostare ref="nameInput"sul mio campo di input nella funzione di rendering, quindi chiamare:

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

Ma dove dovrei chiamare questo? Ho provato alcuni posti ma non riesco a farlo funzionare.

Dovresti farlo dentro componentDidMounte refs callbackinvece. Qualcosa come questo

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>

La risposta di @ Dhiraj è corretta e, per comodità, puoi usare il puntello autoFocus per mettere automaticamente a fuoco un input quando montato:

<input autoFocus name=...

Si noti che in jsx è autoFocus(maiuscola F) a differenza del semplice vecchio HTML che non fa distinzione tra maiuscole e minuscole.

A partire da React 0.15 , il metodo più conciso è:

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

Focus sul monte

Se vuoi solo mettere a fuoco un elemento quando monta (inizialmente il rendering) farà un semplice uso dell'attributo autoFocus.

<input type="text" autoFocus />

Messa a fuoco dinamica

per controllare la messa a fuoco in modo dinamico, utilizzare una funzione generale per nascondere i dettagli di implementazione dai componenti.

Reagisci 16.8 + Componente funzionale: usa il gancio 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 ] 
}

Demo completa

Reagisci 16.3 + Componenti di classe - utilizzaFocus

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

Demo completa

Se vuoi solo fare l'autofocus in React, è semplice.

<input autoFocus type="text" />

Mentre se vuoi solo sapere dove inserire quel codice, la risposta è in componentDidMount ().

v014.3

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

Nella maggior parte dei casi, è possibile collegare un riferimento al nodo DOM ed evitare di utilizzare findDOMNode.

Leggi i documenti API qui: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

React 16.3 ha aggiunto un nuovo modo conveniente per gestirlo creando un ref nel costruttore del componente e utilizzandolo come di seguito:

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

Per maggiori dettagli, puoi consultare questo articolo nel blog di React.

Aggiornare:

A partire da React 16.8 , il useRefgancio può essere utilizzato nei componenti di funzione per ottenere lo stesso risultato:

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

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

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

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

Ho appena incontrato questo problema e sto usando reagire 15.0.1 15.0.2 e sto usando la sintassi ES6 e non riusciva a ottenere quello che mi serviva dalle altre risposte dal V.15 sceso settimane fa e alcune delle this.refsproprietà sono stati deprecati e rimossi .

In generale, ciò di cui avevo bisogno era:

1. Mettere a fuoco il primo elemento di input (campo) quando il componente viene montato
2. Mettere a fuoco il primo elemento di input (campo) con un errore (dopo l'invio)

Sto usando:

• Contenitore React / Componente presentazione
• Redux
• React-Router

Mettere a fuoco il primo elemento di input

Ho usato autoFocus={true}il primo<input /> sulla pagina in modo che quando il componente si monta, si focalizzerà.

Mettere a fuoco il primo elemento di input con un errore

Ciò ha richiesto più tempo ed è stato più contorto. Sto tenendo fuori il codice che non è rilevante per la soluzione per brevità.

Negozio / Stato Redux

Ho bisogno di uno stato globale per sapere se devo impostare lo stato attivo e disabilitarlo quando è stato impostato, quindi non continuerò a reimpostare lo stato attivo quando i componenti vengono nuovamente sottoposti componentDidUpdate()a rendering (userò per verificare l'impostazione dello stato attivo. )

Questo potrebbe essere progettato come ritieni adatto alla tua applicazione.

{
    form: {
        resetFocus: false,
    }
}

Componente contenitore

Il componente dovrà avere la resetfocusproprietà impostata e un callBack per cancellare la proprietà se finisce per focalizzarsi su se stesso.

Inoltre, ho organizzato i miei creatori di azioni in file separati, principalmente perché il mio progetto è abbastanza grande e volevo suddividerli in blocchi più gestibili.

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 di presentazione

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
}

Panoramica

L'idea generale è che ogni campo del modulo che potrebbe avere un errore ed essere focalizzato deve controllare se stesso e se deve focalizzarsi su se stesso.

C'è una logica aziendale che deve accadere per determinare se il campo dato è il campo giusto su cui focalizzare l'attenzione. Questo non viene visualizzato perché dipenderà dalla singola applicazione.

Quando viene inviato un modulo, quell'evento deve impostare il flag di focus globale resetFocussu true. Quindi, man mano che ogni componente si aggiorna, vedrà che dovrebbe verificare se ottiene lo stato attivo e, in caso affermativo, invia l'evento per ripristinare lo stato attivo in modo che altri elementi non debbano continuare a controllare.

modifica Come nota a margine, avevo la mia logica di business in un file "utility" e ho appena esportato il metodo e l'ho chiamato all'interno di ognishouldfocus() metodo.

Saluti!

I documenti di React ora hanno una sezione per questo. 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();
        }
      }} />
    );
  },

Questa non è più la risposta migliore. A partire da v0.13, this.refspotrebbe non essere disponibile fino a quando non componentDidMount()viene eseguito AFTER , in alcuni casi dispari.

Aggiungi il autoFocustag al tuo campo di input, come mostrato sopra da FakeRainBrigand.

Ref. Il commento di @ Dave sulla risposta di @Dhiraj; un'alternativa consiste nell'utilizzare la funzionalità di callback dell'attributo ref sull'elemento da renderizzare (dopo il rendering di un componente):

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

Ulteriori informazioni

Questo è il modo corretto, come autofocus. Quando si utilizza callback anziché stringa come valore di riferimento, viene chiamato automaticamente. Hai a disposizione il tuo riferimento che senza la necessità di toccare il DOM usandogetDOMNode

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

Nota che nessuna di queste risposte ha funzionato per me con un componente TextField material-ui . Per Come mettere a fuoco un materialeUI TextField? Ho dovuto saltare attraverso alcuni cerchi per farlo funzionare:

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

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

È possibile inserire quella chiamata del metodo all'interno della funzione di rendering. O all'interno del metodo del ciclo di vita,componentDidUpdate

Non hai bisogno getInputDOMNode?? in questo caso...

Basta semplicemente ottenere il refe focus()quando il componente viene montato - 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'));

AutoFocus ha funzionato meglio per me. Avevo bisogno di cambiare del testo in un input con quel testo con un doppio clic, quindi questo è quello che ho finito con:

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

NOTA: per risolvere il problema a causa del quale React posiziona il cursore all'inizio del testo, utilizzare questo metodo:

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

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

Ho lo stesso problema ma ho anche qualche animazione, quindi il mio collega suggerisce di usare window.requestAnimationFrame

questo è l'attributo ref del mio elemento:

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

Avvertenza: ReactDOMComponent: non accedere a .getDOMNode () di un nodo DOM; utilizzare invece direttamente il nodo. Questo nodo DOM è stato reso da App.

Dovrebbe essere

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

La risposta più semplice è aggiungere ref = "some name" nell'elemento di testo di input e chiamare la funzione di seguito.

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

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

Per spostare lo stato attivo su un elemento appena creato, è possibile memorizzare l'ID dell'elemento nello stato e utilizzarlo per impostare autoFocus. per esempio

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

In questo modo nessuna delle caselle di testo viene messa a fuoco sul caricamento della pagina (come voglio), ma quando si preme il pulsante "Aggiungi" per creare un nuovo record, quel nuovo record diventa attivo.

Dato autoFocusche non "gira" di nuovo a meno che il componente non venga rimontato, non devo preoccuparmi di disinserire this.state.focus(cioè non continuerò a rubare il focus mentre aggiorno altri stati).

Leggi quasi tutte le risposte ma non hai visto a getRenderedComponent().props.input

Imposta i riferimenti per l'inserimento del testo

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

Dopo aver provato molte opzioni sopra senza successo, ho scoperto che era come ero disablinge poienabling l'input che ha causato la perdita di attenzione.

Avevo un oggetto di scena sendingAnswerche disabilitava l'input mentre eseguivo il polling del 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.
/>

Una volta rimosso l'elica disabilitata, tutto ha ripreso a funzionare.

Versione aggiornata che puoi controllare qui

componentDidMount() {

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

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

Poiché ci sono molte ragioni per questo errore, ho pensato che avrei postato anche il problema che stavo affrontando. Per me, il problema era che ho reso i miei input come contenuto di un altro 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>
  );
}

Questo è il modo in cui ho chiamato il componente sopra:

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

In base alla sintassi aggiornata, è possibile utilizzare this.myRref.current.focus()