Skip to content

Commit

Permalink
Update input example readme
Browse files Browse the repository at this point in the history
  • Loading branch information
nhunzaker committed Dec 19, 2016
1 parent b5522aa commit c72c949
Showing 1 changed file with 48 additions and 2 deletions.
50 changes: 48 additions & 2 deletions examples/inputs/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,49 @@
# Input Test Case
# Inputs

More information around the history of inputs could go here.
This fixture should help identify edge cases with inputs. There are a couple of
important concepts to be aware of when working on inputs in React.

## `defaultValue` vs `value`

An input's value is drawn from two properties: `defaultValue` and `value`.

The `defaultValue` property directly maps to the value _attribute_, for example:

```javascript
var input = document.createElement('input')
input.defaultValue = 'hello'

console.log(input.getAttribute('value')) // => "hello"
```

The `value` property manipulates the _working value_ for the input. This property
changes whenever the user interacts with an input, or it is modified with JavaScript:

```javascript
var input = document.createElement('input')
input.defaultValue = 'hello'
input.value = 'goodbye'

console.log(input.getAttribute('value')) // => "hello"
console.log(input.value) // => "goodbye"
```

## value detachment

Until `value` is manipulated by a user or JavaScript, manipulating `defaultValue`
will also modify the `value` property:

```javascript
var input = document.createElement('input')
// This will turn into 3
input.defaultValue = 3
// This will turn into 5
input.defaultValue = 5
// This will turn into 7
input.value = 7
// This will do nothing
input.defaultValue = 1
```

**React detaches all inputs**. This prevents `value` from accidentally updating if
`defaultValue` changes.

0 comments on commit c72c949

Please sign in to comment.