react-color颜色选择器使用+添加点击空白关闭颜色选择器 ChromePicker

需求如下：点击“A”时打开颜色选择器，在颜色选择器上改不同颜色时，A的下标颜色也跟着修改。点击颜色选择器以外的区域时，关闭颜色选择器。

import { ChromePicker } from 'react-color';

  state = {
    keyWordColor: '#f5222d', // 结果关键词颜色
    keyWordPickerVisible: false, // 结果关键词颜色选择器可见性
  };

  // 当结果关键词颜色版打开时，判断鼠标点击范围，点击外层时，关闭颜色版，并且去除点击监听
  onKeyWorkPickerClick = e => {
    const { keyWordPickerVisible } = this.state;
    try {
      if (keyWordPickerVisible && e.target.compareDocumentPosition(document.getElementById('keyWork')) !== 10) {
        this.setState({ keyWordPickerVisible: false }, () => {
          document.removeEventListener('click', this.onKeyWorkPickerClick, false);
        });
      }
    } catch (error) {
      if (keyWordPickerVisible) {
        this.setState({ keyWordPickerVisible: false }, () => {
          document.removeEventListener('click', this.onKeyWorkPickerClick, false);
        });
      }
    }
  };

const  { keyWordPickerVisible,keyWordColor } = this.state;

          <Row className={style.result}>
            <Col span={4} className={style.resultTitle}>结果关键词样式:<span>*</span></Col>
            <Col span={6}>
              <span
                className={style.resultColor}
                style={{ borderBottomColor: keyWordColor }}
                onClick={() => { this.setState({ keyWordPickerVisible: true }); document.addEventListener('click', this.onKeyWorkPickerClick, false); }}
              >
                A
              </span>

              {
                keyWordPickerVisible ? (
                  <div className={style.colorPicker} id="keyWork">
                    <ChromePicker color={keyWordColor} onChangeComplete={colorObj => this.setState({ keyWordColor: colorObj.hex })} />
                  </div>
                )
                  : null
              }
            </Col>
          </Row>

    .result {
      position: relative;
      overflow: visible;
      
      .resultTitle {
        text-align: right;
        font-size: 14px;
        height: 38px;
        line-height: 38px;
        margin-right: 10px;
  
        span {
          color: #f5222d;
        }
      }
  
      .resultColor {
        font-size: 23px;
        font-weight: 600;
        border-bottom: 5px solid;
        cursor: pointer;
      }
  
      .colorPicker {
        position: absolute;
        left: 26px;
        top: 19px;
        z-index: 9;
      }
    }