Тёмный

React tutorial in Hindi #17 Handle Form | checkbox | input field | select 

Code Step By Step
Подписаться 305 тыс.
Просмотров 82 тыс.
50% 1

in this react js tutorial for beginners series we learn how to handle form data in react js . This video is made by anil Sidhu in the Hindi Language.
Playlist for complete React series in Hindi
link • React tutorial for beg...
code github.com/anil-sidhu/react-1...
Basic Form
Make HTML form
Add some field
Use state for field data
Submit and control form
Interview Question
Join on Insta @php.step.by.step

Опубликовано:

 

11 ноя 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 57   
@Ankitmathur_01
@Ankitmathur_01 Год назад
Sir ap samjhate bahut achhe se ho and koi bhi part skip nhi krte. And app begining se leke chal rhe ho. Ye bahut achha lga mujhe. Dhanyabad
@pratiksha2896
@pratiksha2896 3 года назад
Use alt+Z to wrap your code. You don't need to scroll the entire line of code.
@sushilkumar-ef7gh
@sushilkumar-ef7gh 3 года назад
I recently got to know about your channel....you are simple awesome brother
@Mrudula1416
@Mrudula1416 3 года назад
Nice and helpful to understand react for begginer user. Thanks
@rahul_singh_rajput3292
@rahul_singh_rajput3292 2 года назад
Enjoying & understanding perfectly ✌.. Your explanation is Osm sir..
@ashutoshsrivastava9807
@ashutoshsrivastava9807 Год назад
Njyoing your classes a lot...Thanks for Guidance
@Viralvlogvideos
@Viralvlogvideos Год назад
I made a form with radio buttons,checkbox,select etc.. and also made clear button which will clear the inputs from frontend and also in useState sharing it so that other students can also refer: code: import { useState } from "react"; function App() { const [name, setName] = useState(""); const [term, setTerm] = useState(false); const [who, setWho] = useState("sigma"); const [what, setWhat] = useState(""); function formFun(e) { console.log(name, term, who, what); e.preventDefault(); } function clear() { setName(""); setTerm(false); setWho("sigma"); setWhat(""); } return ( Name: setName(e.target.value)} /> I Agree setTerm(e.target.checked)} /> who are you? setWho(e.target.value)} > sigma alpha omega noob What you do? code setWhat(e.target.value)} /> art setWhat(e.target.value)} /> Click Clear ); } export default App;
@mayurchaudhari4239
@mayurchaudhari4239 5 месяцев назад
Gazab sikhate ho yar aap sir man gaye apko
@user-tg9nx2ij4o
@user-tg9nx2ij4o 9 месяцев назад
You are great teacher
@abhijeetnimbalkar9729
@abhijeetnimbalkar9729 3 года назад
Nice video and helpful
@amitshinde4351
@amitshinde4351 7 месяцев назад
Thanks sir, for helpful video
@codestepbystep
@codestepbystep 7 месяцев назад
Most welcome
@Aarna_kashyap
@Aarna_kashyap 3 года назад
Very helpful
@gauravverma4077
@gauravverma4077 Месяц назад
Thanks sir to learn React
@RajnishKumar-oj3vr
@RajnishKumar-oj3vr 3 года назад
Can we use only e.prevent??
@viveksharma6230
@viveksharma6230 Год назад
Will put the "disabled" attribute under the input tag
@reactjs4278
@reactjs4278 2 года назад
Hello sir, how to clear data on form ??
@WanderingWieSuresh
@WanderingWieSuresh Месяц назад
Abhi to humare pass 3 input the agar 20 honge to kya 20 useState banana padega
@shilpasharma6894
@shilpasharma6894 2 года назад
if we want to clear all the form field by clicking the Clear button as you have mentioned in the end of video. please help with its code for clear button.
@shubhamgarg7
@shubhamgarg7 Год назад
You should try these points, I hope it will help you - (1) You can create a reset button jo aapke form ko clear krdega (2) Aap form tag mei jo Onsubmit function call kiya hai us function mei jakr wapas se values set krdo sbki fr jaise hi aap form ko submit kroge automatically form clear ho jayega kyunki aapne form submit krne ke baad sbki values fr se set krdi
@FM001
@FM001 Год назад
Clear
@AbdulRehman-bd4mb
@AbdulRehman-bd4mb 9 месяцев назад
sir without form kis tara data leta hian
@patience_creator
@patience_creator 6 месяцев назад
Disable with disabled key word. In input field
@StudyAbroadAdventures
@StudyAbroadAdventures 2 года назад
Need help e.preventDefault is creating error plz help:) "Uncaught TypeError: Cannot read properties of undefined (reading 'preventDefault')"
@StudyAbroadAdventures
@StudyAbroadAdventures 2 года назад
when I comment this, app running smoothly....
@rajaasim4474
@rajaasim4474 Год назад
e.preventDefault();
@hades5509
@hades5509 Год назад
@@StudyAbroadAdventures use e.preventDefault()
@AkanshaBhardwaj-fx2zr
@AkanshaBhardwaj-fx2zr 2 месяца назад
const [disableValue,setdisableValue] = useState(false); setdisableValue(true)}>Disable setdisableValue(false)}>Enable sir please check the code is correct or not..??
@harrypotter-ks5qj
@harrypotter-ks5qj Год назад
Sir aapne bataya nhi ki bina form ko use karae hum kaise data ko submit krenge aapne bola tha last me bataunga
@ajitrana3158
@ajitrana3158 Год назад
Sir how to clear data in form
@sauravsubba9987
@sauravsubba9987 2 года назад
Where is the questions and answers? any sepreate video?
@DeepakGupta-hj2dv
@DeepakGupta-hj2dv 3 года назад
Form validation ka video bnao
@codestepbystep
@codestepbystep 3 года назад
Okay, aaj evng me bnauga
@shorttutorials205
@shorttutorials205 Год назад
const [disableValue,setdisableValue] = useState(false); setdisableValue(true)}>Disable setdisableValue(false)}>Enable
@atulkumarsharma489
@atulkumarsharma489 24 дня назад
Value= name wala nhi aya smj me ky kaam kr rh hai
@AmanKumar-ps8th
@AmanKumar-ps8th 3 года назад
Bt how to print all data to screen Here, we only print it in console so please tell me👌
@codestepbystep
@codestepbystep 3 года назад
Just print state data. That's it
@AmanKumar-ps8th
@AmanKumar-ps8th 3 года назад
import React, { useState } from 'react'; import './App.css'; function App() { const [name, setName] = useState(""); const [tnc, setTnc] = useState(false); const [interest, setInterest] = useState(""); const abc = (e) => { e.preventDefault(); } const a = (e) => { setName(e.target.value); } const b = (e) => { setInterest(e.target.value); } const c = (e) => { setTnc(e.target.checked); } return ( handle Form In React Select Options Marvel Dc Accept Terms and Conditions Submit ) } export default App; Sir this is the code and I tried bt it is not showing the data on screen so could u please tell me where and what to right in this code so that it works.
@codestepbystep
@codestepbystep 3 года назад
@@AmanKumar-ps8th {name} Aise use kro state ko, display ho jayega
@AmanKumar-ps8th
@AmanKumar-ps8th 3 года назад
Sir yes this is working bt not on submit button . It is printing while u r filling the input box. For this i think we have to add onclick fxn in button
@codestepbystep
@codestepbystep 3 года назад
Yes, aap iss video se last wala video dekho, wha 1 flag lekr btaya h wo try kro aap
@GIS-Engineer
@GIS-Engineer Год назад
Console pe kuch nahi aa raha na ho koi error aa raha
@SUNNYVLOGS812
@SUNNYVLOGS812 Год назад
what is e here?
@Anonymous04254
@Anonymous04254 Год назад
Sir, 9:05 Pe jo Awaaz aayi wo aapne kiya tha ya kuch editing error hua hai..?😄
@codestepbystep
@codestepbystep Год назад
ye bhai m soch rha tha kuch :D
@divyanshsinghbhati6026
@divyanshsinghbhati6026 Год назад
😂😂😂😂
@ashok-bhaargaw
@ashok-bhaargaw 10 месяцев назад
Hi Anil, I have #Question. I created this form but when I checked the thems and conditions it showing me undefined. Why??
@ManishaKumari-du4wf
@ManishaKumari-du4wf 2 года назад
Sir console mai warning aa rahi hai : unknown event handler property 'onSumit'.it will be ignored
@m.pcreations2122
@m.pcreations2122 Год назад
It's onSubmit not onSumit
@RadheyNameKaSahara
@RadheyNameKaSahara 5 месяцев назад
Hi sir, Your voice is really soo sexy, this is a compliment don't take it wrong.😂
@codestepbystep
@codestepbystep 5 месяцев назад
Hehe.thnx
@dipukumar3472
@dipukumar3472 3 года назад
Sir aap ki insta id not found aa raha he
Далее
React tutorial in Hindi #19 Basic Form validation
17:39
Как похудеть на 10 кг ?! БЫСТРО!
07:06
Наташа Кампуш. 3096 дней в плену.
00:58
React tutorial in Hindi #15 Get Input box value
8:17
How to use React hook form in production
1:02:13
Просмотров 70 тыс.
Context API in react | get the concept
29:00
Просмотров 49 тыс.
React tutorial in Hindi  #20 Pass Function as Props
8:08
Why The Windows Phone Failed
24:08
Просмотров 196 тыс.
Как похудеть на 10 кг ?! БЫСТРО!
07:06