حدث onDrop لا يعمل بشكل صحيح رد فعل؟

0

لدي هذا dropZone قابل للنقر وفتح ملف اختيار الشيء. وبمجرد تحديد ملف من جهاز الكمبيوتر الخاص بك ، فإنه يعطي معاينة له (إذا كانت صورة). أود أن أكون قادرًا على سحب وإسقاط نفس الملف وفعل نفس الشيء كما لو كنت أقوم بالنقر فوق div وفتح ملف.

حاولت الاتصال بي handleChange وظيفة داخل onDrop لكنها لم تنجح وستحصل على TypeError: Cannot read property 'target' of undefined خطأ أو أنها لن تفعل أي شيء على الإطلاق. في ما يلي CodeSandbox لمكون منطقة الإسقاط بمفرده.

هذا هو مقتطف من رمز بلدي:

class DropZone extends Component {

  constructor(props){
    super(props)
    this.state = {
      file: "",
      fileId: uuid(),
      className: 'dropZone'
    }
    this.handleChange = this.handleChange.bind(this)
    this._onDragEnter = this._onDragEnter.bind(this);
    this._onDragLeave = this._onDragLeave.bind(this);
    this._onDragOver = this._onDragOver.bind(this);
    this._onDrop = this._onDrop.bind(this);
  }

  handleChange(event) {
    this.setState({
      file: URL.createObjectURL(event.target.files[0])
    })
    console.log("handleChange")
    //document.getElementsByClassName("dropZone").style.backgroundImage = 'url(' + this.state.file + ')';
  }

  componentDidMount() {
    window.addEventListener('mouseup', this._onDragLeave);
    window.addEventListener('dragenter', this._onDragEnter);
    window.addEventListener('dragover', this._onDragOver);
    document.getElementById('dragbox').addEventListener('dragleave', this._onDragLeave);
    window.addEventListener('drop', this._onDrop);
  }

  componentWillUnmount() {
    window.removeEventListener('mouseup', this._onDragLeave);
    window.removeEventListener('dragenter', this._onDragEnter);
    window.addEventListener('dragover', this._onDragOver);
    document.getElementById('dragbox').removeEventListener('dragleave', this._onDragLeave);
    window.removeEventListener('drop', this._onDrop);
  }

  _onDragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }

  _onDragOver(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }

  _onDragLeave(e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }

  _onDrop(e, event) {
    e.preventDefault();
    this.handleChange
    let files = e.dataTransfer.files;
    console.log('Files dropped: ', files);
    // Upload files
    //this.handleChange.bind(this)
    console.log(this.state.file)
    return false;
  }

render() {
  const uniqueId = this.state.fileId;
  return (
    <div>
      <input type="file" id={uniqueId} name={uniqueId} class="inputFile" onChange={this.handleChange}/>
      <label   htmlFor={uniqueId} value={this.state.file}>
      {this.props.children}
        <div className="dropZone" id="dragbox" onChange={this.handleChange}>
          Drop or Choose File
          <img src={this.state.file} id="pic" name="file" accept="image/*"/>
        </div>
      </label>
      <div>
    </div>
    </div>
  );
}
}

سيكون هناك العديد من هذه الملفات التي تحمّل صورتها / ملفها الفردي. شكر!

1 إجابة

1
افضل جواب

كنت بحاجة لتمرير على e المعلمة إلى handleChange() والتقاط الملفات من الحدث بشكل صحيح.

onDrop

_onDrop(e, event) {
    e.preventDefault();
    this.handleChange(e.dataTransfer.files[0]);
    let files = e.dataTransfer.files;
    console.log("Files dropped: ", files);
    // Upload files
    console.log(this.state.file);
    return false;
}

التعامل مع التغيير

handleChange(file = "") {
    this.setState({
      file: URL.createObjectURL(file)
    });
    //document.getElementsByClassName("dropZone").style.backgroundImage = 'url(' + this.state.file + ')';
}

و في render قم بتحليل الحدث للحصول على الملف: onChange={e => this.handleChange(e.target.files[0])}

بدلا من ذلك ، يمكنك جعل اثنين من مقبضتغيير لتنظيف الفوضى الخاصة بك render طريقة.

رابط لمثال عملي: https://codesandbox.io/s/7k6y94k6w6 (بناءً على رمزك)

:مؤلف
فوق
قائمة طعام