Как отключить события перетаскивания, когда диалоговое окно файла открыто в React? - PullRequest
Новая
       8

Как отключить события перетаскивания, когда диалоговое окно файла открыто в React?

0 голосов
/ 20 июня 2020

Я создал компонент зоны перетаскивания в своем проекте, следуя инструкциям в https://malcoded.com/posts/react-dropzone/ Вот мой код для зоны перетаскивания 

class Dropzone extends Component {
  constructor(props) {
    super(props);
    this.state = { highlight: false };
    this.fileInputRef = React.createRef();
    this.openFileDialog = this.openFileDialog.bind(this);
    this.onFilesAdded = this.onFilesAdded.bind(this);
    this.onDragOver = this.onDragOver.bind(this);
    this.onDragLeave = this.onDragLeave.bind(this);
    this.onDrop = this.onDrop.bind(this);
  }

  openFileDialog() {
    if (this.props.disabled) return;
    this.fileInputRef.current.click();
  }

  fileListToArray(list) {
    const array = []
    for (var i = 0; i < list.length; i++) {
      array.push(list.item(i));
    }
    return array;
  }

  onFilesAdded(evt) {
    if (this.props.disabled) return;
    const files = evt.target.files;
    if (this.props.onFilesAdded) {
      const array = this.fileListToArray(files);
      this.props.onFilesAdded(array);
    }
  }

  onDragOver(evt) {
    evt.preventDefault();

    if (this.props.disabled) return;

    this.setState({ highlight: true });
  }

  onDragLeave() {
    this.setState({ highlight: false});
  }

  onDrop(event) {
    event.preventDefault();

    if (this.props.disabled) return;

    const files = event.dataTransfer.files;
    if (this.props.onFilesAdded) {
      const array = this.fileListToArray(files);
      console.log('array', array);
      this.props.onFilesAdded(array);
    }
    this.setState({ highlight: false });
  }

  render() {
    return (
      <div
        className = {`Dropzone ${this.state.highlight ? "Highlight" : ""}`}
        onDragOver = {this.onDragOver}
        onDragLeave = {this.onDragLeave}
        onDrop = {this.onDrop}
        onClick = {this.openFileDialog}
        style={{ cursor: this.props.disabled ? "default" : "pointer" }}
      >
        <input ref = {this.fileInputRef} className = "FileInput" type = "file" multiple onChange = {this.onFilesAdded} />
        <span className="dropzone-label">Drop Files Here</span>
      </div>
    );
  }
}

export default Dropzone;

Есть ли способ отключить перетаскивание события при открытии диалогового окна файла? Это сделано для того, чтобы пользователь нажимал только на файлы в диалоговом окне, а не перетаскивал их в зону размещения. это становится проблемой c, когда пользователь перетаскивает файлы из диалогового окна файла в зону перетаскивания, когда загружаются две копии одних и тех же файлов. Буду признателен за любую помощь!

...