Skip to content

Commit ce81fd0

Browse files
kentcdoddskentcdodds
committed
another form-elements that is good, but I probably wont use it
1 parent 1b35e6d commit ce81fd0

File tree

1 file changed

+63
-156
lines changed

1 file changed

+63
-156
lines changed

‎22-form-elements.html

Lines changed: 63 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -4,165 +4,37 @@
44
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
55
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
66
<script type="text/babel">
7-
function Text() {
8-
const [value, setValue] = React.useState('')
9-
return (
10-
<div>
11-
<label htmlFor="textInput">Text: </label>
12-
<input
13-
id="textInput"
14-
type="text"
15-
value={value}
16-
onChange={event => setValue(event.target.value)}
17-
/>
18-
</div>
19-
)
20-
}
21-
22-
function Textarea() {
23-
const [value, setValue] = React.useState('')
24-
return (
25-
<div>
26-
<label htmlFor="textareaInput">Textarea: </label>
27-
<textarea
28-
id="textareaInput"
29-
value={value}
30-
onChange={event => setValue(event.target.value)}
31-
/>
32-
</div>
33-
)
34-
}
35-
36-
function Checkbox() {
37-
const [checked, setChecked] = React.useState(false)
38-
return (
39-
<div>
40-
<label htmlFor="checkboxInput">Checkbox: </label>
41-
<input
42-
id="checkboxInput"
43-
type="checkbox"
44-
checked={checked}
45-
onChange={e => setChecked(event.target.checked)}
46-
/>
47-
</div>
48-
)
49-
}
7+
const allItems = ['apple', 'orange', 'grape', 'pear']
508

51-
function Radio() {
52-
const [radio, setRadio] = React.useState('a')
9+
function FormElements() {
10+
const [values, setValues] = React.useState([])
11+
const commaValues = values.join(',')
12+
const selectValues = values.filter(value => allItems.includes(value))
13+
const multilineValues = values.join('\n')
5314

54-
function handleChange(event) {
55-
setRadio(event.target.value)
15+
function handleCommaChange(event) {
16+
setValues(event.target.value.split(','))
5617
}
5718

58-
return (
59-
<div>
60-
<fieldset id="radioField">
61-
<legend>Radio</legend>
62-
<label>
63-
<input
64-
type="radio"
65-
value="a"
66-
checked={radio === 'a'}
67-
onChange={handleChange}
68-
/>{' '}
69-
Apple
70-
</label>
71-
<label>
72-
<input
73-
type="radio"
74-
value="o"
75-
checked={radio === 'o'}
76-
onChange={handleChange}
77-
/>{' '}
78-
Orange
79-
</label>
80-
<label>
81-
<input
82-
type="radio"
83-
value="g"
84-
checked={radio === 'g'}
85-
onChange={handleChange}
86-
/>{' '}
87-
Grape
88-
</label>
89-
<label>
90-
<input
91-
type="radio"
92-
value="p"
93-
checked={radio === 'p'}
94-
onChange={handleChange}
95-
/>{' '}
96-
Pear
97-
</label>
98-
</fieldset>
99-
</div>
100-
)
101-
}
102-
103-
function Select() {
104-
const [selection, setSelection] = React.useState('a')
105-
106-
function handleChange(event) {
107-
setSelection(event.target.value)
19+
function handleMultilineChange(event) {
20+
setValues(event.target.value.split('\n'))
10821
}
10922

110-
return (
111-
<div>
112-
<label htmlFor="selectField">Select </label>
113-
<select id="selectField" value={selection} onChange={handleChange}>
114-
<option value="a">Apple</option>
115-
<option value="o">Orange</option>
116-
<option value="g">Grape</option>
117-
<option value="p">Pear</option>
118-
</select>
119-
</div>
120-
)
121-
}
122-
123-
function MultiSelect() {
124-
const [selection, setSelection] = React.useState(['a'])
125-
126-
function handleChange(event) {
23+
function handleSelectChange(event) {
12724
const selectedOptions = Array.from(event.target.selectedOptions)
12825
const selectedValues = selectedOptions.map(option => option.value)
129-
setSelection(selectedValues)
26+
setValues(selectedValues)
13027
}
13128

132-
return (
133-
<div>
134-
<label htmlFor="multiSelectField">Multi-select </label>
135-
<select
136-
id="multiSelectField"
137-
multiple
138-
value={selection}
139-
onChange={handleChange}
140-
>
141-
<option value="a">Apple</option>
142-
<option value="o">Orange</option>
143-
<option value="g">Grape</option>
144-
<option value="p">Pear</option>
145-
</select>
146-
</div>
147-
)
148-
}
149-
150-
function File() {
151-
const [file, setFile] = React.useState(null)
152-
return (
153-
<div>
154-
<label htmlFor="fileInput">File: </label>
155-
<input
156-
id="fileInput"
157-
type="file"
158-
onChange={event => setFile(event.target.files[0])}
159-
/>
160-
</div>
161-
)
162-
}
163-
164-
function FormElements() {
165-
const [textarea, setTextarea] = React.useState('')
29+
function handleCheckboxChange(event) {
30+
let valuesCopy = [...values]
31+
if (valuesCopy.includes('grape')) {
32+
valuesCopy = valuesCopy.filter(value => value !== 'grape')
33+
} else {
34+
valuesCopy.push('grape')
35+
}
36+
setValues(valuesCopy)
37+
}
16638

16739
function handleSubmit(event) {
16840
event.preventDefault()
@@ -171,13 +43,48 @@
17143

17244
return (
17345
<form onSubmit={handleSubmit}>
174-
<Text />
175-
<Textarea />
176-
<Checkbox />
177-
<Radio />
178-
<Select />
179-
<MultiSelect />
180-
<File />
46+
<div>
47+
<label htmlFor="textInput">Text: </label>
48+
<input
49+
id="textInput"
50+
type="text"
51+
value={commaValues}
52+
onChange={handleCommaChange}
53+
style={{width: 140}}
54+
/>
55+
</div>
56+
<div>
57+
<label htmlFor="textareaInput">Textarea: </label>
58+
<textarea
59+
id="textareaInput"
60+
value={multilineValues}
61+
onChange={handleMultilineChange}
62+
style={{height: 60}}
63+
/>
64+
</div>
65+
<div>
66+
<label htmlFor="multiSelectField">Multi-select </label>
67+
<select
68+
id="multiSelectField"
69+
multiple
70+
value={values}
71+
onChange={handleSelectChange}
72+
>
73+
<option value="apple">apple</option>
74+
<option value="orange">orange</option>
75+
<option value="grape">grape</option>
76+
<option value="pear">pear</option>
77+
</select>
78+
</div>
79+
<div>
80+
<label htmlFor="checkboxInput">Has grape: </label>
81+
<input
82+
id="checkboxInput"
83+
type="checkbox"
84+
checked={values.includes('grape')}
85+
onChange={handleCheckboxChange}
86+
/>
87+
</div>
18188
<button type="submit">Submit</button>
18289
</form>
18390
)

0 commit comments

Comments
 (0)