引用参数编辑时作为整体编辑的逻辑（思路记录）

        需求背景：要做一个通知的推送消息，消息是一个异常汇总的通知，里面涉及到异常个数，这些数字又是不一定的，获取这些的异常个数的接口也不一样，所以要做一个灵活的配置。在做编辑的时候为了方便，需要把引用的参数整体删除掉。

          由于本人表达限制，不清楚需求背景的兄弟看下图：

      

         大概的需求就是这个样子。

思路：

       1.  首先每个参数都是会存在多个，当我们作为整体删除时，要知道删除的是哪个，因此要定位光标位置，使用事件对象的 event.target.selectionStart 定位我们目前处于那个参数的范围，结合光标位置以及参数名称的长度，我们可以定位到具体查找字符串的开始位置和结束位置；

        2. 要区分是 backspace 键还是 delete 键，backspace删除的是前面的内容，delete是删除后面的内容，因此要用 keyCode进行判断；

        3. 匹配到字符串之后，将相应位置的字符串替换为空即可。

        4. 输入框内对应参数的个数为0时，需要把参数列表清空

思路完毕，处理函数代码如下：

 const deleteParamsFn = (event: any) => {
    const { target, code } = event
    let startIndex = target.selectionStart
    let _value = sessionStorage.getItem('keyDownParamsValue') || target.value
    function replaceString(str: any, startPos: any, endPos: any, replacement: any) {
      return str.substring(0, startPos) + replacement + str.substring(endPos);
    }
    function setDesFun(keyCode: any) {
      for (let i = 0; i < paramsSettingList.length; i++) {
        let replaceStr = `{${paramsSettingList[i].key}}`
        let index = _value.lastIndexOf(replaceStr, startIndex)
        if (keyCode === "Backspace") {
          index = _value.lastIndexOf(replaceStr, startIndex)
          if (target.selectionStart - index > 1 && target.selectionStart - index < replaceStr.length) {
            startIndex = index
          }
        }
        if (keyCode === "Delete") {
          index = _value.lastIndexOf(replaceStr, startIndex + replaceStr.length)
          if (target.selectionStart - index > 1 && target.selectionStart - index < replaceStr.length) {
            startIndex = index
          }
        }
        if (index === startIndex) {
          _value = replaceString(_value, index, index + replaceStr.length, '')
          form.setFieldsValue({
            description: _value,
          })
          break
        }
      }
    }
    if (code === "Backspace" || code === 'Delete') {
      setDesFun(code)
    }
    setTimeout(() => {
      let _list = paramsSettingList.filter((e: any) => {
        return _value.includes(`{${e.key}}`)
      })
      setparamsSettingList([..._list])
    })
  }

如有不妥之处，欢迎评论区讨论~