Necesito para asegurarse de que una entrada es un elemento centrado cuando se cumple lo siguiente:

  • el DOM está disponible y
  • propiedades cambiado

Pregunta: ¿tengo que poner mi código en ambos componentDidUpdate y componentDidMount o simplemente componentDidUpdate sería suficiente?

    private makeSureInputElementFocused() {
        if (this.props.shouldGetInputElementFocused && this.inputElement !== null) {
            this.inputElement.focus();
        }

    }

    componentDidMount() {
        this.makeSureInputElementFocused(); //<-- do i need this?
    }
    componentDidUpdate() {
        this.makeSureInputElementFocused();
    }

4 Comentarios

  1. 23

    Usted tiene que utilizar ambos.

    componentDidMount()

    componentDidMount() se invoca inmediatamente después de que un componente está montado. Inicialización que requiere de nodos DOM debería ir aquí. Si usted necesita para cargar los datos desde un extremo remoto, este es un buen lugar para crear una instancia de la solicitud de la red. La configuración del estado en este método se disparará una nueva representación.

    componentDidUpdate()

    componentDidUpdate() se invoca inmediatamente después de la actualización se produce. Este método no es llamado por la inicial de procesamiento.

    Usted también podría colocar en el render() método, que parece que es apropiado para su caso, ya que siempre se quiere comprobar el enfoque. Entonces no es necesario ponerlo en componentDidMount() y componentDidUpdate()

    • Suponiendo que inputElement se refiere a un nodo DOM producido por Reaccionar mediante render‘s valor de devolución, ¿cómo podría interactuar con este nodo DOM en el cuerpo de render antes de que el valor de retorno es siempre para Reaccionar?
  2. 5

    Cada uno de sus condiciones requieren que colocar el código dentro de 1 la función de cada uno:

    • el DOM está disponible y componentDidMount
    • propiedades cambiado – componentDidUpdate

    Así que usted tiene que colocar en el interior de ambas funciones.

    Otra opción es llamar a setState() dentro de componentDidMount, por lo que componentDidUpdate se invoca.

  3. 2

    En Reaccionar v16.7.0-alfa puede utilizar el useEffect gancho:

    import React, { useEffect, useRef } from "react";
    
    function InputField() {
      const inputRef = useRef();
    
      useEffect(() => {
        inputRef.current.focus();
      });
    
      return <input ref={inputRef} />;
    }

    De la docs:

    Si usted está familiarizado con el Reaccionar de la clase métodos del ciclo de vida, usted puede pensar
    de useEffect Gancho como componentDidMount, componentDidUpdate, y
    componentWillUnmount combinado.

    Ejemplo

Dejar respuesta

Please enter your comment!
Please enter your name here