The SolidJS tutorial has several pages that work with a To Do list app. This is the form used:
<div>
<input ref={input} />
<button onClick={(e) => {
if (!input.value.trim()) return;
addTodo(input.value);
input.value = "";
}}
>Add Todo</button>
</div>
If you are doing your own To Do list (or any app that has a form with a single input field) you should do this instead:
<form onSubmit={(e) => {
e.preventDefault()
if (!input.value.trim()) return;
addTodo(input.value);
input.value = "";
}}>
<input autofocus ref={input} />
<button>Add Todo</button>
</form>
Putting the action in the onClick handler forces the user to click the button.
Putting the action in the onSubmit handler allows the user to just press Enter
.
autofocus
magically returns focus to the input, nicer than an imperative input.focus()
.
Also consider e.target.reset()
over input.value=""
.
While I agree it should be changed, The tutorial is not about the button, so it is a minor error in that context.
The bigger problem with that button for me is that it uses an anonymus function. Why not move the function outside the markup, like the addTodo and toggleTodo functions.