Display value for controlled select and textarea
Brandon Dail committed
Dec 22, 2016 at 09:21 UTC
bf235489bf1304a7436b7c85078d0798dd86401b
2 files changed
+31
-13
fixtures/selects/index.html
+6
-1
@@ -26,6 +26,10 @@
26
padding: 20px;
27
width: 45%;
28
}
29
+
30
+ .hint {
31
+ padding-left: 8px;
32
+ }
33
</style>
34
</head>
35
<body>
@@ -55,8 +59,9 @@
59
<option value="">Select a color</option>
60
<option value="red">Red</option>
61
<option value="blue">Blue</option>
58
- <option value="gree">Green</option>
62
+ <option value="green">Green</option>
63
</select>
64
+ <span className="hint">Value: {this.state.value}</span>
65
</fieldset>
66
67
<fieldset>
fixtures/textareas/index.html
+25
-12
@@ -20,12 +20,18 @@
20
width: 100%;
21
}
22
23
- form {
23
+ .container {
24
max-width: 900px;
25
margin: 0 auto;
26
text-align: center;
27
}
28
29
+ .output {
30
+ word-wrap: break-word;
31
+ max-width: 780px;
32
+ margin: auto;
33
+ }
34
+
35
fieldset {
36
border: 1px solid #ccc;
37
display: inline-block;
@@ -33,6 +39,7 @@
39
vertical-align: top;
40
width: 45%;
41
}
42
+
43
</style>
44
</head>
45
<body>
@@ -55,17 +62,23 @@
62
63
render() {
64
return (
58
- <form>
59
- <fieldset>
60
- <legend>Controlled</legend>
61
- <textarea value={this.state.value} onChange={this.onChange.bind(this)} />
62
- </fieldset>
63
-
64
- <fieldset>
65
- <legend>Uncontrolled</legend>
66
- <textarea defaultValue="" />
67
- </fieldset>
68
- </form>
65
+ <div className='container'>
66
+ <form>
67
+ <fieldset>
68
+ <legend>Controlled</legend>
69
+ <textarea value={this.state.value} onChange={this.onChange.bind(this)} />
70
+ </fieldset>
71
+
72
+ <fieldset>
73
+ <legend>Uncontrolled</legend>
74
+ <textarea defaultValue="" />
75
+ </fieldset>
76
+ </form>
77
+ <h4>Controlled Output:</h4>
78
+ <div className='output'>
79
+ {this.state.value}
80
+ </div>
81
+ </div>
82
)
83
}
84
}