如何从类外部的fineuploader const回调访问我的react组件props？

Question

I'm trying to access a react component's props after react-fine-uploader finishes uploading files and fires a callback. However, the uploader is outside the component and I can't seem to access the props of the component from the callback function.

 import React from 'react'; // other imports const uploader = new FineUploaderTraditional({ options: { request: { endpoint: '/upload', }, callbacks: { onAllComplete: function(id, fileName, response) { console.log("Fineuploader: onAllComplete") // trying to access component props here } } } }) class myReactComponent extends React.Component { } export default myReactComponent 

Answer 1

Try putting it inside your component:

import React from 'react';
// other imports
class myReactComponent extends React.Component {
   constructor(props) {
      super(props);
      const uploader = new FineUploaderTraditional({
         options: {
            request: {
            endpoint: '/upload',
            },
            callbacks: {
               onAllComplete: function(id, fileName, response) {
               console.log("Fineuploader: onAllComplete")
               // you should be able to access props here
               }
            }
         }
      })
   }
 }

 export default myReactComponent

You could also put this in render instead of the constructor:

class myReactComponent extends React.Component {
   render() {
      const uploader = new FineUploaderTraditional({
         options: {
            request: {
            endpoint: '/upload',
            },
            callbacks: {
               onAllComplete: function(id, fileName, response) {
               console.log("Fineuploader: onAllComplete")
               // you should be able to access this.props here
               }
            }
         }
      })
      ....
      return <>
    }
 }

Answer 2

after doing some more digging I found I can regester a callback handler inside the component using the following:

  uploader.on('onAllComplete', (id, name, response) => { // }) 

So the const is still outside the class, but I can access the callback inside.