reaccionar: cómo establecer el enfoque desde un controlador de clic

7

Mi formulario basado en react-redux tiene un botón que debería restablecer el formulario y mover el foco de nuevo al primer campo de entrada.
Restablecer el contenido es un estado de reducción directa, pero tengo problemas con el enfoque.

autoFocus en el primer campo solo funciona en el renderizado inicial. ¿Hay alguna forma sensata de volver a activarlo?

Si necesito ir con element.focus () explícito, ¿desde dónde debo llamarlo? Estoy usando react-redux, pero no redux-forms.

2

¿Tiene alguna información almacenada para saber qué elemento debe centrarse en la carga de la página? ¿No? Entonces, ¿por qué deberías hacer eso más tarde?

Activar element.focus()inmediatamente después de enviar la acción; no necesita Redux para lograr esto, ni Redux para almacenar este estado.

El pseudocódigo podría verse así

onReset() {
  const action = {
    type: RESET_FORM,
  }
  dispatch(action);

  const element = getElement(); // propably read ref? Find element with [autoFocus] attribute in component?
  element.focus();
}
1
  • Mi motivación original era limitar las clases de vista al código de renderizado puro y tonto, libre de código de cambio de comportamiento / estado, y poder probar toda la lógica de estado independientemente del renderizado. La diferencia con el manejo de enfoque predeterminado (que no pasa por el estado de mi aplicación) es que ahora mi código lo manipula explícitamente. Pero puede tener razón en que un enfoque más pragmático es mejor para este problema en particular, y mover todo el control de enfoque al código de la aplicación no es realista ni deseable. 13/04/2016 a las 8:15
2

puedes usar:

document.getElementById("ElementName").focus();

Código final aquí:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script>
function change() {
    document.getElementById("two").focus();
}
</script>
</head>



<body>
    <input type="radio" name="name" id="name" onchange="change()" /> 

    <input type="text" name="one" id="one" /> 
    <input type="text" name="two" id="two" /> 
</body>
</html>
0