Files
react.dev/examples/uncontrolled-components/input-type-file.js
Rodrigo Bermúdez Schettino 24f0448d7c Update Ref API in docs (#970)
* Update Ref API in docs

Update to new React.createRef() API in guide "Uncontrolled Components".

* Update Ref API in doc example

Use new Ref API in guide's example.

* Fix syntax error in example

* Update highlighting ranges in docs

After updating to the new createRef API, the highlighting ranges in Uncontrolled Components were wrong.

* Update highlighting ranges in docs example

After updating to the new createRef API, the highlighting ranges in Uncontrolled Components were wrong.

* Update highlighting ranges in docs example

Remove empty line in source code.

* Update uncontrolled-components.md

* Update input-type-file.js
2018-06-22 12:08:03 +01:00

38 lines
778 B
JavaScript

class FileInput extends React.Component {
// highlight-range{4}
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.fileInput = React.createRef();
}
// highlight-range{4}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.current.files[0].name}`
);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
{/* highlight-range{1-3} */}
<input
type="file"
ref={this.fileInput}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<FileInput />,
document.getElementById('root')
);