反应 onClick 事件处理程序没有触发......？

Question

I have a pretty simple div that I need to react when I click it. I minified the problem to below but I can not get a log the Chrome debug screen not matter what I try.

I have tried different syntaxes but below is the "simplest" one. I don't know what else to try but the div will not respond.

 constructor(props) {
    super(props);
    this.divClicked = this.divClicked.bind(this);
  }
    
  divClicked (e) {
    console.log("DEBUG: divClicked!");
  }
 
  render () {
    const data = this.props.data;
    return (
      <div onClick={this.divClicked} id={data.id + 'a'} className='url1_div'>
      </div>
    );
  }
}

divClicked never fires and this is such a simple example I'm wondering is a parent component is causing the issue or some other component is some how effecting it.

Answer 1

I have replicated your code on StackBlitz , and it works.