带参数调用多个函数

Question

I have a function with parameter that is pass as a property:

 currentTaskID = null;
 setTaskID = (id) => { 
         this.currentTaskID = id;
         console.log(this.currentTaskID);
         console.log("test");
     }

Then on my other component I have a function that needs the event handler and call the prop function when clicked:

// select/open task
    openTask = (event) => {
        let targetClass = event.target.classList; 
        if(targetClass.contains('active'))
            targetClass.remove('active')
        else
            targetClass.add('active') 
    }

    // onClick trigger multiple functions
    funcWrapper = (id) => {
        this.openTask();
        this.props.setTaskID.bind(this, id)
    }

Onclick:

onClick={funcWrapper(id)}

error:

Cannot read property 'target' of undefined

How can I pass parameters without overwriting the event?

Answer 1

As the error suggested Cannot read property 'target' of undefined . It is not able to find the target property in undefined . Because target is a property of event object. Because event has not been passed to the method it is represented with undefined.

I suppose you have to do the call in a anonymous callback:

onClick={e => funcWrapper(e, id)}

Then pass the event to the method:

funcWrapper = (ev, id) => {
    this.openTask(ev);
    this.props.setTaskID(id); // <---as it is in fat arrow syntax no need for bind
}