[英]on:keydown event with Enter Key in svelte
I am using svelte with an on:click
event on a button.我在按钮上使用带有
on:click
事件的 svelte。 When this button is clicked, I dispatch some information to a higher component.单击此按钮时,我会将一些信息发送到更高层的组件。 What I would like to do is hit the enter key instead, but
on:keydown
doesn't seem to work?我想做的是改为按回车键,但是
on:keydown
似乎不起作用? How can I get this to fire when hitting enter?我怎样才能在按下回车键时触发它?
<button on:click={() =>
dispatch('search', { searchword: item })}
>ClickMe</button>
<button on:keydown={() =>
dispatch('search', { searchword: item })}
>PressEnter</button>
Enter will automatically fire click
if the button has focus or is part of a form and is clicked implicitly as part of the form submission.如果按钮具有焦点或者是表单的一部分并且作为表单提交的一部分被隐式单击,则 Enter 将自动触发
click
。
Generally I would recommend using a form, then Enter within an <input>
will cause a form submission.通常我会推荐使用表单,然后在
<input>
中输入将导致表单提交。 One can then also directly work with the form's submit
event, as that may need cancelling anyway, unless the page reload is desired.然后还可以直接处理表单的
submit
事件,因为无论如何都可能需要取消,除非需要重新加载页面。
Example:例子:
<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}
The issue was a state machine giving focus/ not giving focus.问题是 state 机器提供焦点/不提供焦点。 This project was using xstate to manage alot.
这个项目使用 xstate 来管理很多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.