Как использовать флажки внутри меню Antd

Question

Я бы хотел добавить флажки в подменю Antd. Ниже мой код.

<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>

Здесь, нажмите на подменю, чтобы позвонить subMenuTitleClick, и нажмите на флажок, чтобы позвонить checkboxClick.

Answer 1

Хорошо, у меня нет полного объема, но я попробую некоторые предположения:

• Не используйте белые символы в объявлениях свойств:
  • onClick={}: хорошо. onClick = {}: плохо
• onTitleClick={subMenuTitleClick} не является событием щелчка, поэтому убедитесь, что компонент <SubMenu/> обрабатывает его правильно
• Ваш <Checkbox/> имеет onClick={this.temp}: убедитесь, что this.temp на самом деле является функцией обработчика кликов

Вот пример. Я удалил несколько вещей, чтобы сделать все это более читабельным

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>
    )
  }
}