Necesito un botón dentro de un formulario que activa el evento onSubmit cuando el usuario presiona el botón Enter.
Este es el ejemplo de una solución de trabajo:
<form onSubmit={() => console.log('ok')}> <button type="submit" autoFocus>Submit</button> </form> Cuando el usuario presiona Enter, onSubmit se activa correctamente.
Mi problema es cuando tengo que renderizar este botón en los accesorios de renderizado de un componente:
<Component render={()=> ( <button type="submit" autoFocus /> // here the button will not be focused )}/>Entonces, cuando presiono Enter, no pasa nada.
¿Hay alguna forma de obtener una solución que funcione usando solo atributos html?
No funciona porque en su ejemplo, el evento del botón onClick no está conectado al GoogleLogin o al Component de envoltura.
Paso a paso:
Debido al autoFocus , cuando se representa el botón, se enfoca automáticamente. Tan pronto como haga clic enter mientras aún está enfocado, se activará el evento de clic de ese botón.
En el ejemplo de html puro, el onSubmit del formulario se activa porque el botón tiene un type="submit" .
<form onSubmit={() => console.log('ok')}> <button type="submit" autoFocus>Submit</button> </form> Entonces, si desea que su ejemplo active GoogleLogin al hacer clic en enter , debe activarlo manualmente a través de accesorios al hacer clic en su botón de esta manera:
<GoogleLogin render={(renderProps) => (!renderProps.disabled ? <button autoFocus onClick={renderProps.onClick}> This is my custom Google button </button>: null )} /> Tenga en cuenta que si el usuario hace clic en Tabulador, el enfoque automático se perderá y la enter de entrada ya no activará el evento onClick .
En su lugar, puede configurar un detector de eventos que escuchará la enter de entrada y activará GoogleLogin siempre que se procese, independientemente del enfoque automático. O deja que su usuario haga clic en ese botón en lugar de ingresar.