framework7：Navbar防抖搜索

1.父页面

点击尝评师打开Navbar数据列表

import React, { useState, useEffect, useMemo } from 'react';
import { isEmpty, last } from 'lodash';
import useDebounce from '~/plugins/useDebounce';
import Api from '~/api/outAddress';
import UserList from './UserList';
import {
  Page,
  Navbar,
  PageContent,
  List,
  ListItem,
  NavTitle,
  Popup,
  Row,
  Button,
  Col
} from '@hvisions/f-ui';
import styles from './style.scss';

const One = ({ f7router }) => {
  const [scanValue, setScanValue] = useState([]);
  const [openPopup, setOpenPopup] = useState(false);
  const debounceData = useDebounce(scanValue, 500);
  const [commentList, setCommentList] = useState([]);
  const [userList, setUserList] = useState([]);
  const [containerList, setContainerList] = useState([]);

  useEffect(() => {
    Api.getCommentFormTasteEvaluator(7)
      .then(data => {
        if (data.tasteEvaluatorList) {
          setUserList(data.tasteEvaluatorList);
        }
      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    Api.getCommentPageByQuery()
      .then(res => {
        setCommentList(res.content);
      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  useEffect(() => {
    if (!isEmpty(debounceData)) {
      handleNext(last(debounceData));
    }
  }, [debounceData]);

  const onToast = (text, position, closeTimeout, cssClass) => {
    f7router.app.toast
      .create({
        text,
        position,
        closeTimeout,
        cssClass
      })
      .open();
  };

  const handleNext = async text => {
    const str = text.trim();
    f7router.app.preloader.show();
    Api.selectByInspectionRecordNumber(str)
      .then(res => {
        if (isEmpty(res)) {
          onToast('此样品容器无待检验单据', 'center', '2000', styles.toastWarn);
          return;
        }
        if (!isEmpty(containerList.find(item => item === str))) {
          onToast('此样品容器已录入，请勿重复扫描', 'center', '2000', styles.toastWarn);
          return;
        }
        setContainerList([...containerList, str]);
      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    f7router.app.preloader.hide();
  };

  const handleKeyDown = () => {
    if (!window.cordova) {
      return;
    }
    window.cordova.define.moduleMap['scanPda.scanPda'].exports.coolMethod('start', data => {
      setScanValue([...scanValue, data]);
    });
  };

  const listComponent = useMemo(() => {
    return (
      <List>
        <ListItem groupTitle title="检验单列表"></ListItem>
        {containerList.map((item, index) => {
          return <ListItem key={index} title={item}></ListItem>;
        })}
      </List>
    );
  }, [containerList]);

  const onFinish = async () => {
    const data = commentList.find(i => i.commentMethodName === '一杯法');
    if (isEmpty(data)) {
      onToast('品评方法数据未配置一杯法', 'center', '2000', styles.toastWarn);
      return;
    }
    f7router.app.preloader.show();
    await Api.addCommentFormTasteEvaluator({
      commentMethodId: 7,
      tasteEvaluatorIdList: userList.map(i => i.id)
    })
      .then(() => {
        onToast('提交成功', 'center', '2000', styles.toastSuccess);
        f7router.back();
      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    await Api.batchSaveCommentFormOneCupMethodV2({
      commentMethodId: data.id,
      sampleContainerList: containerList,
      cupUserDTOList: userList.map(i => ({
        inspectionAccount: i.userAccount,
        inspectionName: i.userName
      })),
      commentPerson: userList.length,
      commentType: 1
    })
      .then(() => {
        onToast('提交成功', 'center', '2000', styles.toastSuccess);
        f7router.back();
      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    f7router.app.preloader.hide();
  };

  return (
    <>
      <Page pageContent={false}>
        <Navbar backLink="返回">
          <NavTitle>开展品评（一杯法）</NavTitle>
          {/* <NavRight>
            <Link onClick={() => handleNext('2820007')}>test</Link>
          </NavRight> */}
        </Navbar>
        <PageContent className={styles.listStyle}>
          {listComponent}
          <form id="addform">
            <List mediaList>
              <ListItem groupTitle title="数据录入"></ListItem>
              <ListItem
                title="尝评师"
                className={styles.listItemStyle}
                link="#"
                text={userList && userList.map(i => i.userName).join('，')}
                onClick={() => setOpenPopup(true)}
              ></ListItem>
            </List>
          </form>
          {!isEmpty(containerList) && !isEmpty(userList) && (
            <Row>
              <Col tag="span">
                <Button raised large fill onClick={onFinish}>
                  提交
                </Button>
              </Col>
            </Row>
          )}
        </PageContent>
        <Popup opened={openPopup} onPopupClosed={() => setOpenPopup(false)}>
          {openPopup && (
            <UserList
              userList={userList}
              f7router={f7router}
              onClose={() => setOpenPopup(false)}
              setUserList={setUserList}
              onToast={onToast}
            />
          )}
        </Popup>
      </Page>
    </>
  );
};

export default One;

2.搜索页面

import React, { useState, useEffect } from 'react';
import {
  Page,
  Navbar,
  List,
  ListItem,
  NavRight,
  Subnavbar,
  Searchbar,
  Link,
  PageContent,
  Chip
} from '@hvisions/f-ui';
import Api from '~/api/outAddress';
import { isEmpty } from 'lodash';
import styles from './style.scss';

const ContainerList = ({ onToast, onClose, setUserList, f7router, userList }) => {
  const [containerList, setContainerList] = useState([]);

  useEffect(() => {
    loadData('');
  }, []);

  const onChangeSearchData = ({ target: { value } }) => {
    loadData(value);
  };

  const loadData = async value => {
    f7router.app.preloader.show();
    await Api.getUserListByUserName2(value || undefined)
      .then(res => {
        setContainerList(res.records || []);
        // setContainerList(res.content || []);

      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    f7router.app.preloader.hide();
  };

  const handleClickDisable = () => {
    loadData('');
  };

  const onHandleSelected = item => {
    setUserList(i => {
      const data = i.find(ii => ii.id === item.id);
      if (isEmpty(data)) {
        return [...i, item];
      } else {
        return i.filter(ii => ii.id !== item.id);
      }
    });
  };

  const deleteChipBound = item => {
    setUserList(i => i.filter(ii => ii.id !== item.id));
  };

  return (
    <Page>
      <Navbar title="选择尝评师">
        <NavRight>
          <Link onClick={onClose}>关闭</Link>
        </NavRight>
        <Subnavbar inner={false}>
          <Searchbar
            searchContainer=".search-list"
            searchIn=".item-title"
            placeholder="请输入尝评师姓名"
            onChange={e => onChangeSearchData(e)}
            onClickClear={handleClickDisable}
            onClickDisable={handleClickDisable}
            style={{ fontSize: 13 }}
            disableButtonText="取消"
          ></Searchbar>
        </Subnavbar>
      </Navbar>
      <PageContent>
        <div>
          {userList.map(i => {
            return (
              <Chip style={{ margin: '3px 4px' }}  color="blue" key={i.id} text={i.userName} deleteable onClick={() => deleteChipBound(i)} />
            );
          })}
        </div>
        <List className="searchbar-found" medialList>
          {containerList.map(item => (
            <ListItem
              key={item.id}
              checkbox
              checked={userList.map(i => i.id).includes(item.id)}
              name="demo-checkbox"
              onClick={() => onHandleSelected(item)}
              mediaItem
              title={item.userName}
              subtitle={item.userAccount}
            ></ListItem>
          ))}
        </List>
      </PageContent>
    </Page>
  );
};

export default ContainerList;

3.增加搜索输入框输入后500毫秒后执行搜索

import React, { useState, useEffect } from 'react';
import {
  Page,
  Navbar,
  List,
  ListItem,
  NavRight,
  Subnavbar,
  Searchbar,
  Link,
  PageContent,
  Chip
} from '@hvisions/f-ui';
import Api from '~/api/outAddress';
import { isEmpty } from 'lodash';
import styles from './style.scss';
import useDebounce from '~/plugins/useDebounce';

const ContainerList = ({ onToast, onClose, setUserList, f7router, userList }) => {
  const [containerList, setContainerList] = useState([]);
  const [nameOrCode, setNameOrCode] = useState(undefined);
  const debouncedSetValue = useDebounce(nameOrCode, 500);
  useEffect(() => {
    loadData('');
  }, []);
  useEffect(() => {
    loadData(debouncedSetValue);
  }, [debouncedSetValue]);

  const onChangeSearchData = ({ target: { value } }) => {
    // loadData(value);
    setNameOrCode(value);
  };

  const loadData = async value => {
    f7router.app.preloader.show();
    await Api.getUserListByUserName2(value || undefined)
      .then(res => {
        setContainerList(res.records || []);
        // setContainerList(res.content || []);
      })
      .catch(err => {
        onToast(err.message, 'center', '2000', styles.toastWarn);
      });
    f7router.app.preloader.hide();
  };

  const handleClickDisable = () => {
    loadData('');
  };

  const onHandleSelected = item => {
    setUserList([item]);
    onClose();
  };

  const deleteChipBound = item => {
    setUserList(i => i.filter(ii => ii.id !== item.id));
  };

  return (
    <Page>
      <Navbar title="选择尝评师">
        <NavRight>
          <Link onClick={onClose}>关闭</Link>
        </NavRight>
        <Subnavbar inner={false}>
          <Searchbar
            searchContainer=".search-list"
            searchIn=".item-title"
            placeholder="请输入尝评师姓名"
            onChange={e => onChangeSearchData(e)}
            onClickClear={handleClickDisable}
            onClickDisable={handleClickDisable}
            style={{ fontSize: 13 }}
            disableButtonText="取消"
          ></Searchbar>
        </Subnavbar>
      </Navbar>
      <PageContent>
        {/* <div>
          {userList.map(i => {
            return (
              <Chip style={{ margin: '3px 4px' }}  color="blue" key={i.id} text={i.userName} deleteable onClick={() => deleteChipBound(i)} />
            );
          })}
        </div> */}
        <List className="searchbar-found" medialList>
          {containerList.map(item => (
            <ListItem
              key={item.id}
              checkbox
              checked={userList.map(i => i.id).includes(item.id)}
              name="demo-checkbox"
              onClick={() => onHandleSelected(item)}
              mediaItem
              title={item.userName}
              subtitle={item.userAccount}
            ></ListItem>
          ))}
        </List>
      </PageContent>
    </Page>
  );
};

export default ContainerList;

⑴防抖自定义HOOK

import { useState, useEffect } from 'react';

/**
 * 防抖自定义HOOK
 * @param {any} value - 改变的值, 比如输入框onChange事件的值
 * @param {int} delay - 间隔多久后变化
 * @return {any} 返回最后改变的值
 */
export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}