Full React Tutorial #27 - Controlled Inputs (forms)

Показать описание

Hey gang, in this React tutorial we'll see how to use input fields & track what a user types into them, using controlled inputs.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

Рекомендации по теме

Комментарии

The fact that this react course is completely free is insane, Your way of teaching is really clear and easy to understand. Keep it up my man you are god given.

dynerushd

/* create new blog form */
.create {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.create label {
text-align: left;
display: block;
}
.create h2 {
font-size: 20px;
color: #f1356d;
margin-bottom: 30px;
}
.create input, .create textarea, .create select {
width: 100%;
padding: 6px 10px;
margin: 10px 0;
border: 1px solid #ddd;
box-sizing: border-box;
display: block;
}
.create button {
background: #f1356d;
color: #fff;
border: 0;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}

spennybad

Thank you so much, having such quality content for free is mindblowing

emmanuelamodu

I would hit the like button every time i watch this if I could. Great way of explaining React my dude. It's been hard for me to understand React, but in the last several months, I've been determined to get really good. I've watched this video like 5 times already easily. And every time I do, I can confirm that it has sunk in way more every time.

pulledporksammiches

Off-topic, but can you show your desk setup?

gradientO

even though i watched your videos before and coded with you. this coming back to them shows me more detail. thank you

tarekghosn

I did not know I can understand everything so easy. Thank you so much Shaun!

dicktracy

recap
this episode talks about two-way data binding ( a very important concept in reactjs, usually used in form element )
1. assign a dynamic value to 'value' attribute of input/textarea/select element.
example
const [name, setName] = useState('mario')
<input value={name}></input>
2. listen 'change' event with a handler (anonomous function) to set value, for example
<input
thats it !!!

maskman

Extremely useful and simple explanation, thank you!

TripeDemo

thank you it helped me quickly understand how it works after I had an implementation question in an interview that didn't go so well

LGgos

This got to be the simplest explanation I've encountered.
Awesome video..
Thanks for sharing 👍

peterluo

splendid narration, neat and clear, top!

giroda

I watched this series yesterday and I catch up with it today! Shaun is definitely a life saver! I bought some React course in Udemy and I just can't stand the instructor's speaking tone, and I am easily distracted by hearing this, but I love shaun's teaching style!

wanyingli

If you want to use default text in your input, then have it clear on click, here is an example of how to do it;

// input state
const [title, setTitle] = useState('Default Text'); // add initial title state value here

<input
type="text"
required
value={title}
onChange={(e) => setTitle(e.target.value)}
onClick={(e) => setTitle('')} // clear input on click
/>

Also, thanks for your great work Net Ninja, I have subbed now, as that's the least I can do for your great tutorials.

juggysingh