Bindings

React ใช้ controlled input: คุณตั้งค่า value={state} แล้วอัปเดต state เองใน onChange นี่เป็นความตั้งใจ — one-way data flow ทำให้การเปลี่ยน state ชัดเจน ส่วน Svelte มี bind:value สำหรับ two-way binding ที่เชื่อม input กับตัวแปรเข้าด้วยกันโดยอัตโนมัติ ไม่มีอะไรใน React ที่เทียบได้ตรง ๆ — เป็น superpower ของ Svelte จริง ๆ

Text input: controlled เทียบกับ `bind:value`

function NameForm() {
  const [name, setName] = React.useState('');
  return (
    <>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Your name"
      />
      <p>Hello, {name || 'stranger'}!</p>
    </>
  );
}

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

<input bind:value={name} placeholder="Your name" />
<p>Hello, {name || 'stranger'}!</p>

bind:value แทนที่ทั้ง value={name} และ onChange={e => setName(e.target.value)} ด้วย directive เดียว

Checkbox: `bind:checked`

function Opt() {
  const [agreed, setAgreed] = React.useState(false);
  return (
    <label>
      <input
        type="checkbox"
        checked={agreed}
        onChange={e => setAgreed(e.target.checked)}
      />
      I agree
    </label>
  );
}

<script>
  let agreed = $state(false);
</script>

<label>
  <input type="checkbox" bind:checked={agreed} />
  I agree
</label>
<p>Agreed: {agreed}</p>

function Picker() {
  const [color, setColor] = React.useState('red');
  return (
    <select value={color} onChange={e => setColor(e.target.value)}>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  );
}

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

<select bind:value={color}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<p>Chosen: {color}</p>

ลองเล่น: form ขนาดเล็ก

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let name = $state('');
  let email = $state('');
  let subscribed = $state(false);
  let plan = $state('free');

  let summary = $derived(
    name
      ? name + ' (' + email + ') — ' + plan + (subscribed ? ' + newsletter' : '')
      : 'Fill out the form above'
  );
</script>

<form onsubmit={e => e.preventDefault()}>
  <label>
    Name
    <input bind:value={name} placeholder="Your name" />
  </label>
  <label>
    Email
    <input type="email" bind:value={email} placeholder="you@example.com" />
  </label>
  <label>
    Plan
    <select bind:value={plan}>
      <option value="free">Free</option>
      <option value="pro">Pro</option>
      <option value="enterprise">Enterprise</option>
    </select>
  </label>
  <label class="check">
    <input type="checkbox" bind:checked={subscribed} />
    Subscribe to newsletter
  </label>
</form>

<p class="summary">{summary}</p>

<style>
  form { display: flex; flex-direction: column; gap: 0.6rem; }
  label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
  label.check { flex-direction: row; align-items: center; gap: 0.5rem; }
  input, select { padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
  .summary { margin-top: 0.75rem; font-style: italic; color: #FF3E00; }
</style>

🔀 React controlled inputs vs Svelte bind:

controlled input ของ React ต้องมี value={state} + onChange={e => setState(e.target.value)} — สองชิ้น
Svelte bind:value={state} ทำทั้งสองอย่างใน directive เดียว — two-way binding โดยไม่ต้องมี handler
bind:checked สำหรับ checkbox, bind:value สำหรับ text/number/email/select/textarea
ปรัชญาของ React: one-way data flow (ชัดเจน) ส่วน Svelte: two-way binding เป็นแบบ opt-in (สะดวก)
bind: เป็น directive ของ Svelte ใช้ได้แค่กับ DOM element หรือ component ที่เปิดเผย prop แบบ $bindable() — ใช้กับค่า JS ทั่วไปไม่ได้
React ไม่มีอะไรเทียบได้ตรง ๆ ที่ใกล้เคียงที่สุดคือ custom hook (useInput) ที่ return { value, onChange }

Bindings

Text input: controlled เทียบกับ bind:value

Checkbox: bind:checked

Select / dropdown

ลองเล่น: form ขนาดเล็ก

Text input: controlled เทียบกับ `bind:value`

Checkbox: `bind:checked`