AutoComplete ReactJS / Redux 不改变搜索值
创始人
2024-09-22 19:30:56
0

在ReactJS / Redux中实现AutoComplete,并且不改变搜索值,可以使用以下解决方法:

首先,创建一个Redux store来存储搜索相关的数据。可以使用redux-thunk中间件来处理异步操作。

在Redux store中,创建以下reducer来处理搜索相关的操作:

// actionTypes.js
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
export const SET_SEARCH_RESULTS = 'SET_SEARCH_RESULTS';

// actions.js
import { SET_SEARCH_TERM, SET_SEARCH_RESULTS } from './actionTypes';

export const setSearchTerm = searchTerm => ({
  type: SET_SEARCH_TERM,
  payload: searchTerm
});

export const setSearchResults = results => ({
  type: SET_SEARCH_RESULTS,
  payload: results
});

// reducer.js
import { SET_SEARCH_TERM, SET_SEARCH_RESULTS } from './actionTypes';

const initialState = {
  searchTerm: '',
  searchResults: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_SEARCH_TERM:
      return {
        ...state,
        searchTerm: action.payload
      };
    case SET_SEARCH_RESULTS:
      return {
        ...state,
        searchResults: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

然后,在React组件中,使用redux-thunk来调用异步操作,并将搜索结果存储到Redux store中:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setSearchTerm, setSearchResults } from './actions';

const AutoComplete = () => {
  const dispatch = useDispatch();
  const searchTerm = useSelector(state => state.searchTerm);
  const searchResults = useSelector(state => state.searchResults);

  const handleSearch = async () => {
    // 进行搜索操作,将结果存储到searchResults中
    const results = await fetchSearchResults(searchTerm);
    dispatch(setSearchResults(results));
  };

  useEffect(() => {
    handleSearch();
  }, [searchTerm]);

  const handleChange = e => {
    dispatch(setSearchTerm(e.target.value));
  };

  return (
    
    {searchResults.map(result => (
  • {result.name}
  • ))}
); }; export default AutoComplete;

在上述代码中,AutoComplete组件中的输入框的值由Redux store中的searchTerm来控制,并且每当searchTerm改变时,会触发handleSearch函数来调用异步操作并更新搜索结果。

这样,无论是用户输入还是调用异步操作,都不会直接改变搜索值,而是通过Redux store来管理和更新搜索值。

相关内容

热门资讯

有挂一下!九九联盟辅助在,广西... 有挂一下!九九联盟辅助在,广西老友玩辅助,好像真的有挂(哔哩哔哩)九九联盟辅助在能透视中分为三种模型...
详细一下!雀友会广东潮汕辅助有... 详细一下!雀友会广东潮汕辅助有开挂,约战大同辅助,总是是有挂(哔哩哔哩);1、打开软件启动之后找到中...
专业一下!微乐小程序外辅助工具... 专业一下!微乐小程序外辅助工具,欢乐茶馆辅助,一直是真的有挂(哔哩哔哩)1、不需要AI权限,帮助你快...
辅助一下!道游互娱辅助,填大坑... 辅助一下!道游互娱辅助,填大坑辅助器视频,其实是真的有挂(哔哩哔哩)一、填大坑辅助器视频可以开透视的...
必备一下!潮娱乐鱼虾蟹公式辅助... 您好,潮娱乐鱼虾蟹公式辅助软件这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302...
总结一下!圣游科技,博雅红河西... 总结一下!圣游科技,博雅红河西元红河挂,确实真的是有挂(哔哩哔哩)1、许多玩家不知道博雅红河西元红河...
分享一下!福建微乐小程序修改器... 分享一下!福建微乐小程序修改器,大懒人斗十四辅助,其实真的有挂(哔哩哔哩)小薇(辅助器软件下载)致您...
解迷一下!天天贵阳游戏辅助,衢... 解迷一下!天天贵阳游戏辅助,衢州都莱罗松辅助器,都是是真的有挂(哔哩哔哩)1、天天贵阳游戏辅助模拟器...
教你一下!青橙竞技游戏辅助,决... 教你一下!青橙竞技游戏辅助,决战卡五星辅助器,都是有挂(哔哩哔哩)亲,关键说明,青橙竞技游戏辅助透视...
普及一下!微信卡五星辅助器,海... 普及一下!微信卡五星辅助器,海盗来了大白辅助,都是是有挂(哔哩哔哩)1、在微信卡五星辅助器插件功能辅...