mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
modifying to docs / forms page, adding route in redirect file, correcting grammatical errors
This commit is contained in:
@@ -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(<input value="hi" />, mountNode);
|
||||
|
||||
setTimeout(function() {
|
||||
ReactDOM.render(<input value={null} />, mountNode);
|
||||
}, 1000);
|
||||
|
||||
```
|
||||
@@ -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(<input value="hi" />, mountNode);
|
||||
|
||||
setTimeout(function() {
|
||||
ReactDOM.render(<input value={null} />, 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.
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
/html-jsx.html http://magic.reactjs.net/htmltojsx.htm 301
|
||||
/html-jsx.html http://magic.reactjs.net/htmltojsx.htm 301
|
||||
/tips/controlled-input-null-value.html /docs/forms.html#controlled-components
|
||||
Reference in New Issue
Block a user