zoukankan      html  css  js  c++  java
  • ant design Tree 自定义title

    根据官方文档TreeNodetitle可以是字符串也可以是ReactNode
    根据需求,需要在后面添加两个复选框来表示编辑和只读权限。以为只是很简单的将 title 改为ReactNode即可。但是复选框选择时,遇到问题,就是不好使。
    究其原因:事件冒泡,点击复选框是同时出发了 title 的点击选中事件(selectable 属性),如果将属性设置为false,则点击就会选中前面的复选框。

    因此只需要在复选框的外层添加 click 事件,并阻止冒泡即可。

      const options = [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' },
      ];
    
      // 自定义title
      const rendertitle = () => (
        <div style={{ display: 'flex' }} onClick={e => e.stopPropagation()}>
          自定义title
          <div style={{ marginLeft: 20 }}>
            <Checkbox.Group options={options} onChange={e => onChange(e)} />
          </div>
        </div>
      )
    
    
  • 相关阅读:
    第7次实践作业 25组
    第6次实践作业 25组
    第5次实践作业
    第4次实践作业
    第3次实践作业
    第2次实践作业
    第1次实践作业
    软工实践个人总结
    2019 SDN大作业
    C语言Il作业01
  • 原文地址:https://www.cnblogs.com/xguoz/p/13596575.html
Copyright © 2011-2022 走看看