DEV Community

Cover image for React, Vue and Svelte: Comparing Text Input Binding
Clément Creusat
Clément Creusat

Posted on

React, Vue and Svelte: Comparing Text Input Binding

Text Input Binding in...

Text input binding is the simplest thing in form binding. React asks us to write more code to handle this. In the opposite, Vue and Svelte do some magic for us!

Check it out 🚀

React

Live Example

const [text, setText] = useState<string>('Hello');

const handleChange = ({
   target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
  setText(value);
};

<section>
  <h2>Text Input</h2>
  <input value={text} onChange={handleChange} />
  <p>{text}</p>
</section>
Enter fullscreen mode Exit fullscreen mode

Vue

Live Example

const text: Ref<string> = ref('Hello');

<section>
  <h2>Text Input</h2>
  <input v-model="text" />
  <p>{{ text }}</p>
</section>
Enter fullscreen mode Exit fullscreen mode

Svelte

Live Example

let name: string = 'Hello';

<section>
  <h2>Text Input</h2>
  <input bind:value={name} />
  <p>{name}</p>
</section>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)