将参数传递给回调函数

Question

触发eventListener时如何将参数传递给箭头函数？

// Name of certificate
let certificateName = document.querySelector('.js--c-name').value;

// Call upload function
currentFileInput.addEventListener('change', fileUpload , false);

const fileUpload = (certificateName) = (evt) => {
  // Here I need the parameter certificateName for testing
  console.log(`Name of Certificate: #{certificateName}`);

  // Function stuff...
  let myFile = evt.target.files[0],
      maxFileSize = evt.target.getAttribute('data-fileSizeMax');

  // Check filesize
  if(myFile.size <= maxFileSize){
   // etc.
  }

}

Answer 1

使您的fileUpload返回内部函数

const fileUpload = (certificateName) => (evt) => {

  console.log(`Name of Certificate: #{certificateName}`);

  let myFile = evt.target.files[0],
      maxFileSize = evt.target.getAttribute('data-fileSizeMax');

  if(myFile.size <= maxFileSize){
   // etc.
  }

}

您需要调用fileUpload函数并传递certificateName 。

currentFileInput.addEventListener('change', fileUpload(certificateName), false);

Answer 2

您需要将函数调用包装在另一个函数中

let certificateName = document.querySelector('.js--c-name').value;

currentFileInput.addEventListener('change', function(e){
  fileUpload(e, certificateName ); //observe changes in this line
}, false);

const fileUpload = (evt, certificateName) => { //pass the arguments 
  //rest of your code as is    
}