组合运算符（交、并、差）按钮小总结

需求简图：

 说明：

        1. 按钮滑入提示文本（替换 or  删除）

        2. 按钮滑入可以点击右上角”红色小标“删除当前按钮；

            也可以点击选中（禁用状态，此时再次滑入点击”红色角标“是无法删除当前按钮的），这个状态下考虑的是用户直接去”替换“当前按钮，而不是删除，否则按钮删除需要再次删除后续的人群、标签，进而重新添加按钮和参与运算的人群、标签，部分类目标签涉及层级太深，步骤次序太多繁琐不利于用户体验。综上，选中后必须去点击运算符列表中的某一个，替换”当前禁用按钮“。

 

        3.删除”红色角标“需要考虑一下如何嵌入Html中的位置，及冒泡事件的影响(较难)

实 现 ： 

index.jsx

 <div className='d-x d-xc d-wrap'>
                            {
                              saveCombinationArr.length > 0
                                && saveCombinationArr.map((e, index) => {
                                if (e.type === SHOW.ACTION) {
                                    return (
                                      <>
                                        <div className='operatorBtn pr tc ml4x mr4x'>
                                          <Balloon
                                            align='t'
                                            v2={true}
                                            closable={false}
                                            triggerType="hover"
                                            trigger={
                                              <Button
                                                disabled={reOperator === index || isView}
                                                onClick={() => this.replaceOperator(index)}
                                              >
                                                <div
                                                  className='initCSS hoverCSS'
                                                  onClick={() => this.deleteOperator(index)}
                                                  style={{ position: 'absolute', top: '-15px', left: '25px' }}
                                                >
                                                  <Icon type="error" size='xs' style={{ color: 'red' }} />
                                                </div>
                                                {e.label}
                                              </Button>
                                            }
                                          >
                                            Check to Replace or Delete operators
                                          </Balloon>

                                        </div>
                                      </>
                                    )
                                  }
                                })
                            }
</div>

inidex.scss

.initCSS {
    display: none;
  }
.operatorBtn:hover .hoverCSS {
    display: block
  }

=> (关键!!!)

1.起初考虑用组件库<Button>来完成,但是无法触发删除事件，原因在于外层已经有了<Button>发生了嵌套，而且react渲染render也不允许，此方法放弃；

现在的方法可以用古人的诗句概括 ："山重水复疑无路，柳暗花明又一村"；又或者说：”踏破铁鞋无觅处，得来全不费工夫“；”众里寻他千百度，蓦然回首那人（div）却在灯火阑珊处“

诸卿应好好品鉴一下古诗之精华，中华文化之博大精深。

首先，既然是click，那就不要局限于组件库，原生div即可解决这个问题；

同样，滑入的提示文本之前方法采用的是<Button> 和 <Icon> 配合来实现，但是会出现问题，具体是：提示文字和”红色角标“只能出现其中一个，二者不能并存，解决办法：className + Style 药到病除（注意此处只用行内样式无法实现）。

综上：

        核心在于剖析问题的细节，有时候会”舍近求远“，而忽略眼前的。回首再看第三句古诗，细细品味 ”div“, 是否有一石二鸟的感觉，一则解决了红色角标的删除事件，二则配合className + style 使得 ”提示“ 和 “删除角标 ” 实现效果和功能。

        分析问题要全面，解决问题要多点（thinking）。