Update input example readme
Nathan Hunzaker committed
Dec 19, 2016 at 08:35 UTC
e86948fc0d1c62f0d6d752740de9ed25ec89e4be
1 file changed
+48
-2
examples/inputs/README.md
+48
-2
@@ -1,3 +1,49 @@
1
-# Input Test Case
1
+# Inputs
2
3
-More information around the history of inputs could go here.
3
+This fixture should help identify edge cases with inputs. There are a couple of
4
+important concepts to be aware of when working on inputs in React.
5
+
6
+## `defaultValue` vs `value`
7
+
8
+An input's value is drawn from two properties: `defaultValue` and `value`.
9
+
10
+The `defaultValue` property directly maps to the value _attribute_, for example:
11
+
12
+```javascript
13
+var input = document.createElement('input')
14
+input.defaultValue = 'hello'
15
+
16
+console.log(input.getAttribute('value')) // => "hello"
17
+```
18
+
19
+The `value` property manipulates the _working value_ for the input. This property
20
+changes whenever the user interacts with an input, or it is modified with JavaScript:
21
+
22
+```javascript
23
+var input = document.createElement('input')
24
+input.defaultValue = 'hello'
25
+input.value = 'goodbye'
26
+
27
+console.log(input.getAttribute('value')) // => "hello"
28
+console.log(input.value) // => "goodbye"
29
+```
30
+
31
+## value detachment
32
+
33
+Until `value` is manipulated by a user or JavaScript, manipulating `defaultValue`
34
+will also modify the `value` property:
35
+
36
+```javascript
37
+var input = document.createElement('input')
38
+// This will turn into 3
39
+input.defaultValue = 3
40
+// This will turn into 5
41
+input.defaultValue = 5
42
+// This will turn into 7
43
+input.value = 7
44
+// This will do nothing
45
+input.defaultValue = 1
46
+```
47
+
48
+**React detaches all inputs**. This prevents `value` from accidentally updating if
49
+`defaultValue` changes.