From 66572d8a989610c543b02eedb04da5c84958bb7c Mon Sep 17 00:00:00 2001 From: Fanny Vieira Date: Sat, 7 Oct 2017 08:34:39 -0300 Subject: [PATCH] modifying to docs / forms page, adding route in redirect file, correcting grammatical errors --- content/docs/controlled-input-null-value.md | 19 ------------------- content/docs/forms.md | 17 +++++++++++++++++ static/_redirects | 3 ++- 3 files changed, 19 insertions(+), 20 deletions(-) delete mode 100644 content/docs/controlled-input-null-value.md diff --git a/content/docs/controlled-input-null-value.md b/content/docs/controlled-input-null-value.md deleted file mode 100644 index b6e5a72b..00000000 --- a/content/docs/controlled-input-null-value.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: controlled-input-null-value -title: Controlled input null value -permalink: docs/controlled-input-null-value.html ---- - -Specifying the value prop on a [controlled component](/docs/forms.html) prevents the user from changing the input unless you desire so. - -You might have run into a problem where value is specified, but the input can still be changed without consent. In this case, you might have accidentally set value to undefined or null. - -For example, this code shows this phenomenon; after a second, the text becomes editable. -```javascript -ReactDOM.render(, mountNode); - -setTimeout(function() { - ReactDOM.render(, mountNode); -}, 1000); - -``` \ No newline at end of file diff --git a/content/docs/forms.md b/content/docs/forms.md index 9f400e3d..5a84d915 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -264,6 +264,23 @@ this.setState(partialState); 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. +## Controlled Input Null Value + +Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. + +You might have encountered a situation where value is specified but an input is still editable. In this case you might have accidentally set value to undefined or null. + +The following code demonstrates this. (The input becomes editable after a short delay.) + +```javascript +ReactDOM.render(, mountNode); + +setTimeout(function() { + ReactDOM.render(, mountNode); +}, 1000); + +``` + ## Alternatives to Controlled Components 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. diff --git a/static/_redirects b/static/_redirects index 1ce66126..e44b3d79 100644 --- a/static/_redirects +++ b/static/_redirects @@ -1 +1,2 @@ -/html-jsx.html http://magic.reactjs.net/htmltojsx.htm 301 \ No newline at end of file +/html-jsx.html http://magic.reactjs.net/htmltojsx.htm 301 +/tips/controlled-input-null-value.html /docs/forms.html#controlled-components \ No newline at end of file