标签内的表格一个搜索输入

时间:2019-11-12 13:18:34

标签: javascript reactjs antd

我有多个标签,每个标签上都有一个表格。 我已经获取了要通过API填充到表格上的数据。 我只使用一个端点,而对其他表使用过滤器。

但是我在搜索功能上遇到了问题。 我需要搜索数据取决于当前处于活动状态的标签。

我正在此项目上使用AntD组件

这是它的样子 enter image description here

这是我的代码

let data = []; // Global variable for search function
let setTimeoutId = -1;

const RequestTabs = () => {
  const [isAll, setIsAll] = useState(data); //All Tab
  const [isResolved, setIsResolved] = useState(data); //Resolved Today tab

  const [state, setState] = useState({
   loading: true,
   activeKey: 'all',
   searchItem: '',
  });

  const fetchAll = async () => {
   try {
    data = await TriggerRequestAPI.getAll();

    setState({
      ...state,
      loading: false,
      ...params,
    });
    setIsAll(data);
   } catch (err) {
    console.log(err);
   }
  };

  const fetchIsResolved = async () => {
    try {
      data = await TriggerRequestAPI.getAll();
      const resolved = data.filter(item => item.status == 'Resolved');

      setState({
        ...state,
        loading: false,
      });
      setIsResolved(resolved);
   } catch (err) {
    console.log(err);
   }
  };

  useEffect(() => {
   fetchAll();
   fetchIsResolved();
  }, [setState]);

  const changeTab = key => {
   setState({
    ...state,
    activeKey: key,
    loading: false,
   });
  };


  const onSearch = e => {
   const value = e.target.value;
   clearTimeout(setTimeoutId);
   setTimeoutId = setTimeout(() => {
    if (value) {
     const filteredData = data.filter(row => {
      return Object.values(row)
        .join(' ')
        .toLowerCase()
        .includes(value.toLowerCase());
      });

      setIsAll(filteredData);
     }
    }, 200);
  };
}

0 个答案:

没有答案