bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/React/React Core
React•React Core

React Submit Forms

Submitting Forms

You can control the submit action by adding an event handler in the onSubmit attribute for the <form> :

Example

Add a submit button and an event handler in the onSubmit attribute:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function MyForm() {
 const [name, setName] = useState("");
 function handleChange(e) {
 setName(e.target.value);
 }
 function handleSubmit(e) {
 e.preventDefault();
 alert(name);
 }
 return ( <form onSubmit={handleSubmit}> <label>Enter your name: <input
 type="text"
 value={name}
 onChange={handleChange}
 /> </label> <input type="submit" /> </form> )
}
createRoot(document.getElementById('root')).render( <MyForm /> );

Previous

React Forms

Next

React Forms - Textarea