如何解决如何创建可用于不同文件的通用搜索功能
下面的代码在同一个文件中有搜索栏和搜索技术卡和搜索下拉列表。如何形成三个单独的文件,一个用于搜索 UI 和功能(不返回任何内容),第二个仅显示搜索到的技术卡,第三个显示搜索后的下拉列表。记住给定代码中的 props 应该保留,但不知道如何在不同组件中显示卡片和下拉列表时使用它们。
import React,{ useState,useEffect } from "react";
import { Form } from "react-bootstrap";
import { authPost,authGet } from "../../api/api";
import { inputFieldsLength } from "../../globals/applicationConstants";
import TechnologyCard from "../../components/cards/TechnologyCard";
import {
BasePath,GetAllGigWorkersPA,GetRolesByType,} from "../../globals/serviceURLs";
import { log } from "../../globals/log";
import { getAccessToken } from "../../globals/localStorage";
const SearchTechnology = ({
filter,setFilter,label,data,handleClick,selected,techCardNeeded,role,setRole,setRoleList,setRoles,setTechError,technologyTyped,setTechnologyTyped,}) => {
const [technologySuggestions,setTechnologySuggestions] = useState([]);
const [techTyped,setTechTyped] = useState("");
const token = getAccessToken();
useEffect(() => {
getRoles(filter.technology);
},[]);
const autosuggest = () => {
return (
<div className="suggestion-tech">
{technologySuggestions.map((item,index) => (
<div
className={techCardNeeded == "true" ? "" : "suggestion-tech-item"}
key={index}
onClick={() => handleTechnologySelected(item)}>
{techCardNeeded == "true" ? null : item.nme}
</div>
))}
</div>
);
};
const handleTechnologySelected = (technology) => {
filter.technology = technology;
setFilter(filter);
setTechError("");
setTechnologySuggestions([]);
setTechnologyTyped
? setTechnologyTyped(filter.technology.nme)
: setTechTyped(filter.technology.nme);
getRoles(filter.technology);
};
const handleTechnologyChange = (technologyStringTyped) => {
setTechnologyTyped
? setTechnologyTyped(technologyStringTyped)
: setTechTyped(technologyStringTyped);
technologyStringTyped = technologyStringTyped.trim();
if (technologyStringTyped.length >= 3) {
const path = `/tech/srch`;
const config = {
cont: technologyStringTyped,count: inputFieldsLength.SearchResultsCount,};
authGet(BasePath,path,config,token)
.then((res) => {
if (res.length === 0) {
setTechnologySuggestions([]);
} else if (res.length > 0) {
setTechnologySuggestions(res);
}
})
.catch(() => {});
} else if (
technologyStringTyped.length < inputFieldsLength.SearchStringMinLength
) {
setTechnologySuggestions([]);
}
};
const getRoles = (primaryTech) => {
let roleTypeArray = [];
roleTypeArray = [
...roleTypeArray,filter.technology ? filter.technology.rtyp : undefined,];
roleTypeArray = roleTypeArray.filter(function (el) {
return el != null;
});
const typ = new Set(roleTypeArray);
const config = {
caid: 2,typ: Array.from(typ),psz: 100,pno: 0,};
authGet(BasePath,token)
.then((res) => {
setRoles(res.lst);
setRolesByType(primaryTech ? primaryTech.rtyp : undefined,res.lst);
})
.catch((err) => {
console.log(err);
});
};
const setRolesByType = (roleType,roles) => {
let newRoles = roles.filter((i) => i.typ === roleType);
if (newRoles.length === 0) {
newRoles = roles;
}
setRoleList(newRoles);
if (roleType && role) {
for (let i in roles) {
if (roles[i].rid === role.rid) {
setRole(role);
break;
}
}
}
};
const form = () => {
return (
<Form.Group controlId="technology">
{label !== "" ? (
<Form.Label>
<b>Technology</b>
</Form.Label>
) : (
""
)}
<Form.Control
onChange={(e) => handleTechnologyChange(e.target.value)}
value={technologyTyped ? technologyTyped : techTyped}
type="text"
placeholder="Search for any technology"
className="technology-input"
/>
{autosuggest()}
</Form.Group>
);
};
return (
<>
{techCardNeeded === "true" ? (
technologyTyped === "" || techTyped === "" ? (
<>
{form()}
<div className="jb-list">
{data.map((item) => {
return (
<TechnologyCard
technology={item}
selected={selected(item)}
onClick={handleClick}
/>
);
})}
</div>
</>
) : (
<>
{form()}
<div className="jb-list">
{technologySuggestions.map((item) => {
return (
<TechnologyCard
technology={item}
selected={selected(item)}
onClick={handleClick}
/>
);
})}
</div>
</>
)
) : (
<>{form()}</>
)}
</>
);
};
export default SearchTechnology;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。