/
06.js
49 lines (41 loc) · 1.68 KB
/
06.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// Basic Forms
import React from 'react'
function UsernameForm({onSubmitUsername}) {
// 🐨 add a submit event handler here (`handleSubmit`).
// 💰 Make sure to accept the `event` as an argument and call
// `event.preventDefault()` to prevent the default behavior of form submit
// events (which refreshes the page).
//
// 🐨 get the value from the username input (using whichever method
// you prefer from the options mentioned in the markdown file),
// 🐨 Call `onSubmitUsername` with the value of the input
// 🐨 add the onSubmit handler to the <form> below
// 🐨 make sure to associate the label to the input by specifying an `id` on
// the input and a matching value as an `htmlFor` prop on the label.
return (
<form>
<div>
<label>Username:</label>
<input type="text" />
</div>
<button type="submit">Submit</button>
</form>
)
}
/*
🦉 Elaboration & Feedback
After the instruction, copy the URL below into your browser and fill out the form:
http://ws.kcd.im/?ws=React%20Fundamentals%20&e=Basic%20Forms&em=
*/
////////////////////////////////////////////////////////////////////
// //
// Don't make changes below here. //
// But do look at it to see how your code is intended to be used. //
// //
////////////////////////////////////////////////////////////////////
function Usage() {
const onSubmitUsername = username => console.info('username', username)
return <UsernameForm onSubmitUsername={onSubmitUsername} />
}
Usage.title = 'Basic Forms'
export default Usage