标签：const undefined Builder value React props isSelect Query any

基于上一篇《自定义一个玩出花来的查询构建器React Query Builder》

在此基础上又做了一次升级改造，让我来看看升级后的查询构建器长什么样吧！

1. 左、右两侧支持Cascader级联菜单选择
2. 支持级联菜单Tooltip悬浮提示
3. 右侧可通过Switch开关控制：输入框input/Cascader级联菜单
   
   

核心功能代码实现

1、左右两侧均为自定义组件

1）修改QueryBuilder组件的配置信息

<QueryBuilder
      disabled={disabled}
      query={query}
      operators={operators}
      combinators={combinators}
      translations={translations}
      controlElements={controlElements}
      controlClassnames={controlClassnames}
      onQueryChange={(q) => {
        setQuery(q);
      }}
    />

2）对controlElements进行修改：valueEditor、fieldSelector

const controlElements = {
  valueEditor: (props: any) => (
    <EndValueEditor
      ruleId={ruleId}
      eventId={eventId}
      fromDetail={fromDetail}
      dimension={dimension}
      {...props}
    />
  ),
  fieldSelector: (props: any) => (
    <CustomValueEditor
      ruleId={ruleId}
      eventId={eventId}
      fromDetail={fromDetail}
      dimension={dimension}
      {...props}
    />
  ),
};

⚠️注意：EndValueEditor和CustomValueEditor组件传入的props参数可以不用管，这部分因设计而异。

3）在前面的文章中已经有左侧级联菜单组件的代码实现逻辑，右侧可直接copy后重命名后使用

import CustomValueEditor from './CustomValueEditor';
import EndValueEditor from './EndValueEditor';

2、支持级联菜单Tooltip悬浮提示

该功能可以直接参考：【避坑指“难”】Antd Cascader实现悬浮提示Tooltip功能

3、右侧可通过Switch开关控制：输入框input/Cascader级联菜单

对右侧组件EndValueEditor进行改造

1）监听Switch的onChange变化，根据变化渲染Input 或者 Cascader

  const [isSelect, setIsSelect] = useState<any>(undefined); // 输入框or选择框
  const [inputTemp, setInputTemp] = useState(0); 

		 <Switch
          checkedChildren="变量"
          unCheckedChildren="变量"
          size="small"
          defaultChecked={temp ? true : false}
          onChange={handleSwitch}
          disabled={cascaderDisabled}
        />

 const handleSwitch = (checked: any) => {
    // true选择框,false输入框
    if (checked) {
      // 选择框
      setIsSelect(true);
      setInputTemp(1)
    } else {
      // 输入框
      setIsSelect(false);
      setInputTemp(1)
    }
  };

2）获取数据后回显

if (props && options.length > 0) {
	const propstemp = props.value != '' ? props.value : undefined;
    const showSelect = DFS(options, propstemp);

    let temp;
    if (typeof isSelect === 'undefined' && typeof showSelect === 'undefined') {
      temp = false;
    } else if (typeof isSelect !== 'undefined' && typeof showSelect !== 'undefined') {
      temp = isSelect;
    } else temp = typeof isSelect !== 'undefined' ? isSelect : showSelect;

	return(
		<div>
          {temp ? (
            <Cascader
              expandTrigger="hover"
              options={options}
              displayRender={displayRender}
              showSearch={{ filter }}
              defaultValue={list}
              value={ inputTemp == 1 ? [] : list}
              onChange={(value: any) => {
                setInputTemp(0)
                const data = value[value.length - 1];
                if (data != undefined) {
                  props.handleOnChange(data, isSelect);
                }
              }}
            />
          ) : (
            <Input
              defaultValue={props.value}
              value={inputTemp == 1 ? '' : props.value}
              onChange={(e: any) => {
                setInputTemp(0)
                props.handleOnChange(e.target.value);
              }}
            />
          )}
        </div>
	)
}

  let list = [] as any;
    const DFS = (op: any, field: any) => {
    for (let i = 0; i < op.length; i++) {
      const localName = op[i].name;
      const localChildren = op[i].children;
      list.push(localName);
      if (localName === field) {
        return true;
      }
      if (localChildren) {
        const res = DFS(localChildren, field);
        if (res) {
          return true;
        } else {
          list.pop(localName);
        }
      }
    }
  };

标签：const,undefined,Builder,value,React,props,isSelect,Query,any
来源： https://blog.csdn.net/weixin_42224055/article/details/123580255

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。