Skip to content

Commit c862fbf

Browse files
authored
Merge pull request #35 from FannyVieira/issue-16-null-input
fix #16 missing documentation: null/undefined as input value
2 parents 0e64723 + 5a084dd commit c862fbf

File tree

2 files changed

+17
-1
lines changed

2 files changed

+17
-1
lines changed

content/docs/forms.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,21 @@ this.setState(partialState);
264264

265265
Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
266266

267+
## Controlled Input Null Value
268+
269+
Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
270+
271+
The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
272+
273+
```javascript
274+
ReactDOM.render(<input value="hi" />, mountNode);
275+
276+
setTimeout(function() {
277+
ReactDOM.render(<input value={null} />, mountNode);
278+
}, 1000);
279+
280+
```
281+
267282
## Alternatives to Controlled Components
268283

269284
It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.

static/_redirects

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
/html-jsx.html http://magic.reactjs.net/htmltojsx.htm 301
1+
/html-jsx.html http://magic.reactjs.net/htmltojsx.htm 301
2+
/tips/controlled-input-null-value.html /docs/forms.html#controlled-input-null-value

0 commit comments

Comments
 (0)