Question

我有一个react-redux网站，允许用户从文件系统中拖放文件，现在我想让他们在移动设备上做同样的事情- 从摄像机添加屏幕截图，或从图库添加文件。

对于在台式机上的拖放操作，我使用的是react-dropzone package。

任何帮助将不胜感激！

Answer 1

您可以从以下文档中使用以下代码：它允许用户单击DropZone并打开文件选择器：

class Basic extends React.Component {
  constructor() {
    super()
    this.state = {
      disabled: true,
      files: []
    }
  }

  onDrop(files) {
    this.setState({files});
  }

  toggleDisabled() {
    this.setState({
      disabled: !this.state.disabled
    })
  }

  render() {
    const files = this.state.files.map(file => (
      <li key={file.name}>
        {file.name} - {file.size} bytes
      </li>
    ))

    return (
      <section>
        <aside>
          <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
          >
            Toggle disabled
          </button>
        </aside>
        <div className="dropzone">
          <Dropzone
            onDrop={this.onDrop.bind(this)}
          >
            {({getRootProps, getInputProps}) => (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                 <p>Drop files here, or click to select files</p>
              </div>
            )}
          </Dropzone>
        </div>
        <aside>
          <h4>Files</h4>
          <ul>{files}</ul>
        </aside>
      </section>
    );
  }
}

<Basic />

Answer 2

正确的答案是react-dropzone效果很好（根据harish soni的回答）但这取决于移动版本： react-dropzone使用所有移动设备不支持的'input type =“ file”'html元素。

要更好地了解移动支持，请参阅here

反应-允许用户从图库或相机添加文件

2 个答案: