Estoy usando svelte con un evento on:click en un botón. cuando se hace clic en este botón, envío cierta información a un componente superior. Lo que me gustaría hacer es presionar la tecla Intro en su lugar, pero on:keydown no parece funcionar. ¿Cómo puedo hacer que esto se dispare al presionar enter?
<button on:click={() => dispatch('search', { searchword: item })} >ClickMe</button> <button on:keydown={() => dispatch('search', { searchword: item })} >PressEnter</button>Intro activará automáticamente el click si el botón tiene el foco o es parte de un formulario y se hace clic implícitamente como parte del envío del formulario.
En general, recomendaría usar un formulario, luego Ingresar dentro de un <input> provocará el envío de un formulario. Luego, también se puede trabajar directamente con el evento de envío del submit , ya que es posible que deba cancelarse de todos modos, a menos que se desee recargar la página.
Ejemplo:
<script> let value = ''; let submittedValue = null; </script> <form on:submit|preventDefault={() => submittedValue = value}> <label> Search <input bind:value /> </label> <button on:click={() => console.log('button clicked')}>GO</button> </form> {#if submittedValue != null} <p>Submitted: {submittedValue}</p> {/if}El problema era una máquina de estado que se enfocaba/no se enfocaba. Este proyecto estaba usando xstate para administrar mucho.