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
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>
Vue
const text: Ref<string> = ref('Hello');
<section>
<h2>Text Input</h2>
<input v-model="text" />
<p>{{ text }}</p>
</section>
Svelte
let name: string = 'Hello';
<section>
<h2>Text Input</h2>
<input bind:value={name} />
<p>{name}</p>
</section>
Top comments (0)