-1

I would like to add checkboxes inside Antd Submenu. Following is my code. 

<Menu style = {{height: '100vh', overflow: 'auto'}} mode="inline" inlineCollapsed = "false">
     <SubMenu key="sub1" onTitleClick = {subMenuTitleClick} title={<span><Icon type="mail" onClick = {this.temp}/><Checkbox onClick = {this.checkboxClick}></Checkbox><span>Sources</span></span>}>
         <Menu.Item key={key1}>{detail.docTtl}</Menu.Item>
     </SubMenu>
</Menu>

Here, click on Submenu should call subMenuTitleClick and click on checkbox should call checkboxClick.

sujay jakhadi
  • 24
  • 3
  • Hi Sujay & welcome to Stackoverflow. Please clarify your question as it is not understandable as is... Also, your code is not complete (Menu is not closed) and doe not give us enough context to understand your problem – GuCier Apr 12 '19 at 09:01
  • @Creaforge I have updated my question. Thanks!! – sujay jakhadi Apr 12 '19 at 09:13

1 Answers1

0

Ok, so I don't have the full scope but I'll try some assumptions :

  • Do not use whitespeces in properties declarations :
    • onClick={} : good. onClick = {} : bad
  • onTitleClick={subMenuTitleClick} is not a click event, so make sure the <SubMenu/> component handles it correctly
  • Your <Checkbox/> has a onClick={this.temp}: make sure that this.temp is actually a click handler function

Here is an example. I removed a few things to make the whole more readable

class MyClass extends React.Component {

  handleWhateverClic = () => { /* Do stuff */ }

  handleCheckboxClick = () => { /* Do stuff */ }

  render() {
    return (
      <Menu >
        <SubMenu onTitleClick={this.handleWhateverClic} title={
          <span>
            <Icon type="mail" onClick={this.handleWhateverClic}/>
            <Checkbox onClick={this.handleCheckboxClick} />
            <span>Sources</span>
          </span>
        }>
          <Menu.Item>{detail.docTtl}</Menu.Item>
        </SubMenu>
      </Menu>
    )
  }
}
GuCier
  • 6,919
  • 1
  • 29
  • 36
  • Thanks for the help!! But with this I am still facing the original issue i.e. Click on checkbox also triggers `handleWhateverClic`. I have tried using stopPropgation and preventDefault. But its not working. I suppose the reason is event types are different. – sujay jakhadi Apr 12 '19 at 11:46
  • Mh ok so this is a nested onClick problem, setting `event.stopPropagation();` on the parent event is the correct way of doing it. See [this answer](https://stackoverflow.com/questions/20723125/onclick-events-in-nested-html-elements]), maybe you have a css issue, like an element overflowing on top of the other? Also, depending on how your handlers are made, you can try `onTitleClick={event => this.handleWhateverClic(event)}` – GuCier Apr 12 '19 at 11:53