Mantendo Inputs e Estado Sincronizados

No Módulo 4, você criou um formulário de reserva com $state e manipuladores de eventos manuais. Cada input precisava de um handler oninput para atualizar o estado. Isso funciona, mas o Svelte oferece algo mais limpo: a diretiva bind cria vinculação bidirecional — as mudanças fluem automaticamente nos dois sentidos.

O Que Você Vai Aprender

Entender a diferença entre vinculação unidirecional e bidirecional
Usar bind:value para inputs de texto
Ver como a vinculação simplifica o código de formulários

A Abordagem Manual

Veja como você poderia lidar com um input sem vinculação:

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

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

Isso cria um fluxo de dados unidirecional:

Estado → Input: value={name} exibe o valor atual
Input → Estado: oninput={handleInput} atualiza o estado quando o usuário digita

Funciona, mas cada input precisa do seu próprio handler. Com dez campos de formulário, seriam dez handlers.

A Abordagem com Vinculação

A diretiva bind:value cuida das duas direções:

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

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

É só isso. Nenhum handler necessário. Quando o usuário digita, name é atualizado. Quando name muda programaticamente, o input é atualizado.

Como Funciona

bind:value é açúcar sintático. O compilador o transforma em:

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

Mas você não precisa escrever isso — o Svelte cuida disso. A vinculação mantém o estado e o DOM perfeitamente sincronizados.

Vinculação com Diferentes Tipos de Input

bind:value funciona com qualquer input que tenha um valor:

Input de texto:

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

Input de e-mail:

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

Input de senha:

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

Input numérico:

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

Observação: Para type="number", o valor vinculado é automaticamente convertido para número (ou null se estiver vazio).

Textarea:

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

Select dropdown:

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

Aplicando ao BookIt

Vamos simplificar o formulário de reserva do 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>

Três inputs, zero handlers. A prévia é atualizada conforme você digita.

Vinculação vs Manipuladores de Eventos

Quando usar cada um?

Use bind:value quando:

Você quer sincronização bidirecional simples
O input representa diretamente o estado
Nenhuma transformação é necessária

Use manipuladores de eventos quando:

Você precisa transformar o input (ex.: converter para maiúsculas)
Você quer validar a cada tecla pressionada
Você precisa disparar efeitos colaterais

<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 a maioria dos campos de formulário, bind:value é a escolha certa.

Erros Comuns

Esquecer os Dois-Pontos

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

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

Sem bind:, as mudanças no input não atualizarão o estado.

Vinculação a Variáveis Que Não São de Estado

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

<input bind:value={name} />

As vinculações funcionam com $state para acionar a reatividade.

Resumo

A diretiva bind:value cria vinculação bidirecional entre inputs e estado. Ela elimina handlers de eventos repetitivos e mantém seus formulários limpos. Use-a com inputs de texto, textareas, selects e inputs numéricos.

Principais conclusões:

bind:value sincroniza input e estado automaticamente
Funciona com texto, e-mail, número, textarea e select
Substitui os padrões manuais de value + oninput

Próximos Passos

Os campos de texto foram abordados. Continue com Campos de Nome e E-mail do Cliente para construir a seção de informações de contato do formulário de reserva.