当前位置: 首页 > news >正文

react+antd封装一个可回车自定义option的select并且与某些内容相互禁用

需求背景

一个select框  现在要求可多选 并且原有一个any的选项  其他选项为输入后回车自己增加  若选择了any   则其他选项不可选择反之选择其他选项any不可选择  并且回车新增时也不可直接加入到选中数组只加入到option内  并且不可重复添加新内容

实现过程

 <Form.Item label={formatMessage({ id: 'label.alarm.SourceAddress' })} 
 name="sourceAddress">
          <Select
            mode="multiple"
            maxTagCount={3}
            showSearch
            searchValue={inputValue}
            onChange={(e) => createSelectionHandler(e, 'any', sourceList, setSourceList)}
            placeholder={formatMessage({ id: 'select.placeholder' })}
            onSearch={setInputValue}
            onInputKeyDown={sourceHandleKeyDown}
            options={sourceList}
            getPopupContainer={(triggerNode) => triggerNode.parentElement || 
            document.body}
          />
 </Form.Item>
 //js部分
  // 源地址列表
  const [sourceList, setSourceList] = useState([{ value: 'any', label: 'any', disabled: 
  false }]);
  // 源地址输入框
  const [inputValue, setInputValue] = useState('');
  // 通用处理函数
  const createSelectionHandler = (specialValue, key, stateList, setState) => {
    const newList = stateList.map((item) => ({
      ...item,
      disabled: specialValue.includes(key)
        ? item.value !== key // 如果选中特殊值,禁用其他选项
        : specialValue.length > 0 // 如果选中普通值,禁用特殊值
        ? item.value === key
        : false, // 没有选中时恢复默认
    }));
    setState(newList);
  };
  // 源地址处理键盘事件(回车)
  const sourceHandleKeyDown = (e) => {
    if (e.key === 'Enter' && inputValue.trim()) {
      const newValue = inputValue.trim();
      const lis = addAlarmForm.getFieldValue('sourceAddress');
      if (!lis.includes(newValue)) {
        if (lis.includes('any')) {
          setSourceList([
            ...sourceList,
            {
              value: newValue,
              label: newValue,
              disabled: true,
            },
          ]);
        } else {
          setSourceList(
            [
              ...sourceList,
              {
                value: newValue,
                label: newValue,
                disabled: false,
              },
            ].map((item) => ({
              ...item,
              disabled: item.value == 'any',
            })),
          );

          addAlarmForm.setFieldsValue({
            sourceAddress: [...lis, newValue],
          });
        }
      }
      setInputValue('');
    }
  };

相关文章:

  • ffmpeg中格式转换需要注意点总结
  • 设计模式基础入门
  • Android 使用CameraX实现预览、拍照、录制视频(Java版)
  • AI产品的基础设施:算法、数据与大语言模型
  • 解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
  • 基于SpringBoot的仓库管理系统-023
  • 递归详解:从原理到实战
  • 9.常用模板引擎
  • Elasticsearch索引的字段映射
  • 串口中断接收与环形缓冲实例(apollo3 blue plus)
  • Perl 哈希
  • Springboot实战:如何用Docker和Kubernetes部署微服务
  • Unity中MonoBehaviour组件禁用时协程的行为
  • Qt基本框架(1)
  • 正则表达式和通配符
  • Python 中的 `partial`:函数参数预设的艺术
  • unity UI管理器
  • 笔记:代码随想录算法训练营day64:拓扑排序精讲、dijkstra(朴素版)精讲
  • 算法设计学习3
  • HTTP,请求响应报头,以及抓包工具的讨论
  • 近七成科创板公司2024年营收增长,285家营收创历史新高
  • “五一”假期逛上海车展请提前购票,展会现场不售当日票
  • 中方发布《不跪!》视频传递何种信息?外交部回应
  • 宁夏民政厅原厅长欧阳艳已任自治区政府副秘书长、办公厅主任
  • 外交部官方公众号发布视频:不跪!
  • 发布亮眼一季度报后,东阿阿胶股价跌停:现金流隐忧引发争议