amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 04:12:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wordsmithing

Browse Source 
Replaced "a <input>" with "an <input>" in a couple of places.

Simplified wording slightly to (hopefully) be easier for non-native speakers to read.
This commit is contained in:
Brian Vaughn
2018-01-02 10:27:34 -08:00
committed by GitHub
parent 436c43e32e
commit 82cf82486a
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
content/docs/forms.md
View File

@@ -191,20 +191,20 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
>```
## The file input Tag
In HTML, a `<input type="file">` lets the user choose one or more files from their device's storage, allowing the app to handle them as per the use case.
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, a `<input type="file" />` works similarly to a normal `<input/>` with some major differences. The `<input type="file" />` in React is read-only and hence setting the value of a file programmatically is impossible. You can use the various File management API provided by Javascript to handle the files that are uploaded by the user.
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)
Note how a `ref` to the file input is used to access the file(s) in the submit handler
## Handling Multiple Inputs
When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.