Mantén los Inputs y el Estado Sincronizados

En el Módulo 4, construiste un formulario de reservas con $state y manejadores de eventos manuales. Cada input necesitaba un manejador oninput para actualizar el estado. Eso funciona, pero Svelte ofrece algo más limpio: la directiva bind crea enlace bidireccional — los cambios fluyen en ambas direcciones automáticamente.

Lo Que Aprenderás

Entender el enlace unidireccional vs bidireccional
Usar bind:value para inputs de texto
Ver cómo el enlace simplifica el código de formularios

El Enfoque Manual

Así es como podrías manejar un input sin enlace:

<script>
  let name = $state('');
  
  function handleInput(event) {
    name = event.target.value;
  }
</script>

<input type="text" value={name} oninput={handleInput} />
<p>Hello, {name}!</p>

Esto crea un flujo de datos unidireccional:

Estado → Input: value={name} muestra el valor actual
Input → Estado: oninput={handleInput} actualiza el estado cuando el usuario escribe

Funciona, pero cada input necesita su propio manejador. Con diez campos de formulario, eso son diez manejadores.

El Enfoque con Enlace

La directiva bind:value maneja ambas direcciones:

<script>
  let name = $state('');
</script>

<input type="text" bind:value={name} />
<p>Hello, {name}!</p>

Eso es todo. No se necesita ningún manejador. Cuando el usuario escribe, name se actualiza. Cuando name cambia programáticamente, el input se actualiza.

Cómo Funciona

bind:value es azúcar sintáctica. El compilador lo transforma en:

<input
  type="text"
  value={name}
  oninput={(e) => name = e.target.value}
/>

Pero tú no escribes eso — Svelte lo maneja. El enlace mantiene el estado y el DOM perfectamente sincronizados.

Enlace a Diferentes Tipos de Input

bind:value funciona con cualquier input que tenga un valor:

Input de texto:

<input type="text" bind:value={customerName} />

Input de email:

<input type="email" bind:value={email} />

Input de contraseña:

<input type="password" bind:value={password} />

Input numérico:

<input type="number" bind:value={quantity} />

Nota: Para type="number", el valor enlazado se convierte automáticamente a un número (o null si está vacío).

Textarea:

<textarea bind:value={notes}></textarea>

Select desplegable:

<select bind:value={selectedService}>
  <option value="lawn-mowing">Lawn Mowing</option>
  <option value="hedge-trimming">Hedge Trimming</option>
</select>

Aplicar en BookIt

Simplifiquemos el formulario de reservas del Módulo 4:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let notes = $state('');
</script>

<form>
  <label>
    Name
    <input type="text" bind:value={customerName} />
  </label>
  
  <label>
    Email
    <input type="email" bind:value={customerEmail} />
  </label>
  
  <label>
    Notes
    <textarea bind:value={notes}></textarea>
  </label>
</form>

<div class="preview">
  <h3>Booking Preview</h3>
  <p>Name: {customerName || 'Not entered'}</p>
  <p>Email: {customerEmail || 'Not entered'}</p>
  <p>Notes: {notes || 'None'}</p>
</div>

Tres inputs, cero manejadores. La vista previa se actualiza mientras escribes.

Enlace vs Manejadores de Eventos

¿Cuándo deberías usar cada uno?

Usa bind:value cuando:

Quieras sincronización bidireccional simple
El input represente directamente el estado
No se necesite ninguna transformación

Usa manejadores de eventos cuando:

Necesites transformar el input (p. ej., convertir a mayúsculas)
Quieras validar en cada pulsación de tecla
Necesites desencadenar efectos secundarios

<script>
  let username = $state('');
  
  function handleInput(event) {
    // Force lowercase, no spaces
    username = event.target.value.toLowerCase().replace(/\s/g, '');
  }
</script>

<!-- Transform input as user types -->
<input type="text" value={username} oninput={handleInput} />

Para la mayoría de los campos de formulario, bind:value es la opción correcta.

Errores Comunes

Olvidar los Dos Puntos

<!-- ❌ This sets a static attribute, not a binding -->
<input type="text" value={name} />

<!-- ✅ This creates two-way binding -->
<input type="text" bind:value={name} />

Sin bind:, los cambios en el input no actualizarán el estado.

Enlazar a Variables que No Son de Estado

<script>
  // ❌ Regular variable won't trigger updates
  let name = '';
  
  // ✅ Use $state for reactive binding
  let name = $state('');
</script>

<input bind:value={name} />

Los enlaces funcionan con $state para disparar la reactividad.

Resumen

La directiva bind:value crea enlace bidireccional entre inputs y estado. Elimina el código repetitivo de manejadores de eventos y mantiene tus formularios limpios. Úsala para inputs de texto, textareas, selects e inputs numéricos.

Puntos clave:

bind:value sincroniza el input y el estado automáticamente
Funciona con texto, email, número, textarea y select
Reemplaza los patrones manuales de value + oninput

Próximos Pasos

Los campos de texto han sido cubiertos. Continúa con Campos de Nombre y Email del Cliente para construir la sección de información de contacto del formulario de reserva.