From b20566ba96ee301ad449ade81f34271acacc83de Mon Sep 17 00:00:00 2001 From: Fanny Vieira Date: Fri, 6 Oct 2017 18:48:39 -0300 Subject: [PATCH 1/4] fix #16 missing documentation: null/undefined as input value --- content/docs/controlled-input-null-value.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create 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 new file mode 100644 index 00000000..b6e5a72b --- /dev/null +++ b/content/docs/controlled-input-null-value.md @@ -0,0 +1,19 @@ +--- +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 From 66572d8a989610c543b02eedb04da5c84958bb7c Mon Sep 17 00:00:00 2001 From: Fanny Vieira Date: Sat, 7 Oct 2017 08:34:39 -0300 Subject: [PATCH 2/4] 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 From d3349102de0f5b3ee8a294ad459dec454c60406c Mon Sep 17 00:00:00 2001 From: Fanny Vieira Date: Sat, 7 Oct 2017 09:41:29 -0300 Subject: [PATCH 3/4] fix redirect file --- static/_redirects | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/_redirects b/static/_redirects index e44b3d79..7db75e0c 100644 --- a/static/_redirects +++ b/static/_redirects @@ -1,2 +1,2 @@ /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 +/tips/controlled-input-null-value.html /docs/forms.html#controlled-input-null-value \ No newline at end of file From 5a084dd028d6eab9023f3909e6ec90c73b75f591 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sat, 7 Oct 2017 08:06:06 -0700 Subject: [PATCH 4/4] Wording nits --- content/docs/forms.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 5a84d915..8136e42d 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -266,11 +266,9 @@ Also, since `setState()` automatically [merges a partial state into the current ## 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. +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`. -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.) +The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.) ```javascript ReactDOM.render(, mountNode);