In the component there is such a button:

<a href="#" className="controls-header-left" name="previous_year" onClick={this.previousControlClick}> <span className="glyphicon glyphicon-triangle-left" aria-hidden="true"> </span> </a>

This button will scroll through the calendar a year ago. There is also a button that will translate year 1 forward. I want to do the same with the months and create 2 universal methods that, depending on the button name, will scroll through the month and year. In the general form, the scheme is the following: the method gets the name, proceeding from the name, goes to the desired case , then pulls the parent method, into which it reports what has changed. In the parent method, setState occurs. When clicked event.target.name is undefined . Accordingly, nothing changes further. Please tell me why this is happening and how to fix it.

The method at the moment is:

 previousControlClick(event) { switch(event.target.name) { case 'previous_year' : { var changed_year = {'year': this.props.year-1} this.props.updateCalendar(changed_year) } case 'previous_month' : { } } }

parent setState:

 updateCalendar(param) { if(param.year !== 'undefined'){ this.setState({ year: param.year }) } else { this.setState({ year: param.month }) } }
  • and tried to use currentTarget? In general, it seems you have an error when using the "ascent" because you actually click on the span, and only the "a" element has a name. Here you can read how to solve this error learn.javascript.ru/event-bubbling . If I'm right, then adding a name to the span element will make your code work. Although it may not be so. Your function is called and it seems that it should have already been called for an "a" element. - alexoander
  • @alexoander the problem was not that I didn’t give the name of the spank. currentTarget helped. Thank you very much! There are two requests: 1 Please duplicate the comment in response so that I choose it and close the question. Can you explain in 2 words what the difference is between target and currentTarget? Thanks in advance - Iga
  • 2
    and that would not be onClick = {this.previousControlClick.bind (this, 'previous_year')} that is, to forward to the handler, not an event, but an immediately meaningful line. Of course, if your name doesn’t bear any additional load - Duck Learns to Take Cover
  • @ Duck STUDYING A great option. Thank you very much for the help. I got rid of extra lines of code. I entered only for a click. Therefore, you can move away from it - Iga
  • @Iga, it seems like there is a pitfall that the bind wrapper will be recreated with each render. And in very, very large and complex applications, this can seem to have a bad effect on performance. But in most cases, the way to write. - Duck Learns to Take Cover

2 answers 2

And tried to use event.currentTarget ? For a good difference between target and currentTarget described quite simply.

currentTarget is a general concept, and usually it designates an element that is "higher" than everyone in the hierarchy level. Those. if we click on any button on the form, then the currentTarget will point to the form because the button is "attached" to the form (because it contains a button inside itself).

But the target is where the event is directly directed. Those. With an example of a form and a button, the target will point exactly to the button.

I liked this example here. I hope he is vivid enough to show the difference.

    target - the element that called, currentTarget - the element is the event initiator

    and try to register in a switch like this switch (event.target || event.srcElement) .name) {..