Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Easy access form value in Nextjs/React with TS
Sarwar Hossain
Sarwar Hossain

Posted on

     

Easy access form value in Nextjs/React with TS

🎉 Unlocking the Power of TypeScript with Easy and Simple React or Nextjs Forms!

Are you tired of handling form submissions in React with simple code? Say goodbye to manual form field extraction and embrace the elegance of TypeScript! 💻⚡️

With TypeScript's event type, I have included code for you.

🛠️ Example: Let's take a look at how easy it is to handle form submissions in React with TypeScript:

Image description

Now use for 🔍 Easy Accessing Form Data:

🔗 #ReactForms #TypeScript #DeveloperExperience #StreamlinedDevelopment #TypeSafety

Sarwar #full-stack-developer

Direct code for public and open

importReact,{BaseSyntheticEvent}from'react'exportdefaultfunctionSignUpForm(){constsubmitHandler=async(e:BaseSyntheticEvent<Event,EventTarget&HTMLFormElement>)=>{e.preventDefault();constvalues=Object.fromEntries(newFormData(e.target))console.log('Form values:',values);////! console  Form values:  { username: 'sarwarasik@gmail.com', password: '123456' }};return(<formonSubmit={submitHandler}><div><labelhtmlFor="username">Username:</label><inputtype="text"id="username"name="username"/></div><div><labelhtmlFor="password">Password:</label><inputtype="password"id="password"name="password"/></div><buttontype="submit">Submit</button></form>);}
Enter fullscreen modeExit fullscreen mode

see console

consoleFormvalues:{username:'sarwarasik@gmail.com',password:'123456'}
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Full Stack Software Developer
  • Location
    Dhaka, Bangladesh
  • Education
    Bachelor Of Science
  • Pronouns
    he
  • Work
    Full Stack Software Developer
  • Joined

More fromSarwar Hossain

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp