Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

README.md 1.1 KiB

há 3 anos
123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. If you're still using class components, you can use the [`<Dropzone>`](https://react-dropzone.js.org/#components) component provided by the lib:
  2. ```jsx harmony
  3. import React, {Component} from 'react';
  4. import Dropzone from 'react-dropzone';
  5. class Basic extends Component {
  6. constructor() {
  7. super();
  8. this.onDrop = (files) => {
  9. this.setState({files})
  10. };
  11. this.state = {
  12. files: []
  13. };
  14. }
  15. render() {
  16. const files = this.state.files.map(file => (
  17. <li key={file.name}>
  18. {file.name} - {file.size} bytes
  19. </li>
  20. ));
  21. return (
  22. <Dropzone onDrop={this.onDrop}>
  23. {({getRootProps, getInputProps}) => (
  24. <section className="container">
  25. <div {...getRootProps({className: 'dropzone'})}>
  26. <input {...getInputProps()} />
  27. <p>Drag 'n' drop some files here, or click to select files</p>
  28. </div>
  29. <aside>
  30. <h4>Files</h4>
  31. <ul>{files}</ul>
  32. </aside>
  33. </section>
  34. )}
  35. </Dropzone>
  36. );
  37. }
  38. }
  39. <Basic />
  40. ```