时间戳

首页 > 解决方案 > 如何在 Antd 菜单中使用复选框

reactjs - 如何在 Antd 菜单中使用复选框

问题描述

我想在 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>

在这里，点击 Submenu should callsubMenuTitleClick并点击 checkbox should call checkboxClick。

标签： reactjsantd

解决方案

好的，所以我没有完整的范围，但我会尝试一些假设：

  • 不要在属性声明中使用 whitespeces：
    • 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>
    )
  }
}

推荐阅读