Soy nuevo en svelte y estoy tratando de tener una idea de las mejores prácticas. Quiero crear un componente de formulario dinámico que pueda usar en una aplicación. Cada instancia del formulario tendrá el mismo estilo, pero cada formulario estará vinculado a diferentes valores de entrada en la tienda, tendrá una lógica de envío diferente, etc.

Aquí hay un ejemplo simple (que no funciona):

App.esbelta

 <script> import store from "./store"; import Form from "./Form.svelte"; const { inputValueA, inputValueB } = store; const handleSubmitA = () => { alert($inputValueA); }; const handleSubmitB = () => { alert($inputValueB); }; </script> <div> <Form inputValue={$inputValueA} labelText="form input a" handleSubmit={handleSubmitA} /> <Form inputValue={$inputValueB} labelText="form input b" handleSubmit={handleSubmitB} /> </div>

Forma.esbelta

 <script> export let handleSubmit = () => null; export let inputValue = ""; export let labelText = ""; </script> <form> <label for="input">{labelText}</label> <input id="input" type="text" value={inputValue} /> <button on:click|preventDefault={handleSubmit}>submit</button> </form>

Este ejemplo no funciona, no creo que la propiedad inputValue esté vinculada correctamente a la entrada de texto. ¿Alguna persona con experiencia esbelta dispuesta a compartir cómo abordaría esto?

Aquí hay una caja de arena:
https://codesandbox.io/s/svelte-form-component-ujnwki

¡Déjame saber lo que sugieres! Gracias.