mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-25 23:05:23 +00:00
* 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
38 lines
778 B
JavaScript
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')
|
|
);
|