mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
Move the section on file inputs to avoid circular learning dep (#588)
This commit is contained in:
@@ -189,6 +189,7 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
|
||||
>```js
|
||||
><select multiple={true} value={['B', 'C']}>
|
||||
>```
|
||||
|
||||
## The file input Tag
|
||||
|
||||
In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
|
||||
@@ -197,13 +198,7 @@ In HTML, an `<input type="file">` lets the user choose one or more files from th
|
||||
<input type="file" />
|
||||
```
|
||||
|
||||
In React, an `<input type="file" />` works similarly to a normal `<input/>` with one important difference: **it is read-only**. (You can't set the value programmatically.) Instead, you should use the File API to interact with the files.
|
||||
|
||||
The following example shows how a `ref` can be used to access file(s) in a submit handler:
|
||||
|
||||
`embed:forms/input-type-file.js`
|
||||
|
||||
[Try it on CodePen](codepen://forms/input-type-file)
|
||||
Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
|
||||
|
||||
## Handling Multiple Inputs
|
||||
|
||||
|
||||
@@ -64,3 +64,20 @@ render() {
|
||||
```
|
||||
|
||||
Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
|
||||
|
||||
## The file input Tag
|
||||
|
||||
In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
|
||||
|
||||
```html
|
||||
<input type="file" />
|
||||
```
|
||||
|
||||
In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
|
||||
|
||||
You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
|
||||
|
||||
`embed:uncontrolled-components/input-type-file.js`
|
||||
|
||||
[Try it on CodePen](codepen://uncontrolled-components/input-type-file)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user