demanda:
Cuando realice proyectos móviles, introduzca el cuadro de entrada de entrada. Cuando utilice el cuadro de entrada de entrada, espero obtener el enfoque automáticamente, de modo que el método de entrada en el terminal móvil aparezca automáticamente, lo que es conveniente para los usuarios.
lograr:
<Input
ref={
function (input) {
if (input != null) {
input.focus();
}
}}
/>
por qué
En React.js, básicamente no necesitas lidiar con el DOM directamente. React.js proporciona una serie de métodos on * para ayudarnos a monitorear eventos, por lo que no es necesario llamar directamente a la API DOM de addEventListener en React.js; en el pasado, usábamos operaciones DOM manuales para actualizar la página (por ejemplo , con la ayuda de jQuery), pero en React.js.En js, el componente se puede volver a renderizar directamente a través de setState, y los nuevos accesorios se pueden pasar al componente hijo durante el renderizado, para lograr el efecto de page actualizar.
El mecanismo de re-renderización de React.js nos ayuda a evitar la mayoría de las operaciones de actualización del DOM, y también permite que las bibliotecas de terceros como jQuery, que principalmente encapsulan las operaciones del DOM, se eliminen de nuestra cadena de herramientas de desarrollo.
Pero React.js no puede satisfacer por completo todos los requisitos de manipulación de DOM. A veces todavía tenemos que lidiar con DOM. Por ejemplo, si desea enfocarse automáticamente en un cuadro de entrada después de ingresar a la página, debe llamar a la API DOM de input.focus (). Por ejemplo, desea obtener dinámicamente el tamaño de un elemento DOM para la animación posterior, etcétera.
React.js proporciona el atributo ref para ayudarnos a obtener el nodo DOM del elemento montado. Puede agregar el atributo ref a un elemento JSX:
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={
(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
Puede ver que agregamos un atributo ref al elemento de entrada y el valor del atributo es una función. Cuando el elemento de entrada está montado en la página, React.js llamará a esta función y pasará el nodo DOM montado a esta función. En la función, configuramos este elemento DOM como un atributo de la instancia del componente, de modo que podamos obtener este elemento DOM a través de this.input en el futuro.
Entonces podemos usar este elemento DOM en componentDidMount y llamar a la API DOM de this.input.focus (). En general, la función de enfocarse automáticamente en el cuadro de entrada cuando se carga la página se completa (puede notar que usamos el ciclo de vida del componente de componentDidMount).
Podemos agregar una referencia a cualquier etiqueta de elemento HTML representativo para obtener su elemento DOM y luego llamar a la API DOM. Pero recuerde un principio: si puede usar ref, no lo usa. En particular, evite usar ref para realizar las operaciones de actualización automática de la página y el monitoreo de eventos que React.js ya puede ayudarlo a hacer. Las operaciones DOM excesivas son en realidad "ruido" en el código, lo que no favorece nuestra comprensión y mantenimiento.
Por cierto, puede agregar una referencia a la etiqueta del componente, por ejemplo:
<Clock ref={
(clock) => this.clock = clock} />
De esta manera, lo que obtiene es una instancia de este componente Clock inicializado dentro de React.js. Pero esta no es una práctica común, y no se recomienda hacerlo, por lo que se menciona brevemente aquí, y los amigos interesados pueden aprender y explorar por sí mismos.
