내 애플리케이션에 전역 적으로 적용되는 검색 구성 요소가 있으며 검색 결과를 맨 위에 표시합니다. 사용자가 검색 결과를 클릭하거나 브라우저의 뒤로 버튼을 사용하는 등 모든 종류의 탐색 을 수행하면 검색을 재설정하고 싶습니다. 결과 및 검색 입력 필드를 지 웁니다 .
현재 나는 이것을 처리하고있다 Context; 함수 SearchContext.Provider를 브로드 캐스트하는 이 있고 resetSearch탐색을 처리 할 때마다 탐색 resetSearch을 처리하기 전에 호출하는 소비자가 있습니다 ( useHistory후크를 사용하여 프로그래밍 방식으로 수행 ).
이것은 브라우저의 컨트롤에서 뒤로 버튼을 누를 때 작동하지 않습니다 (내 컨트롤에서 벗어난 것이므로).
Routes내 resetSearch함수가 호출 되는지 확인하기 위해 연결할 수 있는 중간 단계 가 렌더링 (또는 브라우저 탐색 발생) 전에 있습니까?
요청한대로 코드는 다음과 같습니다.
// App.js
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const resetSearch = () => {
setResults([]);
setQuery("");
};
<SearchContext.Provider value={{ resetSearch }}>
// all of my <Route /> components in this block
</SearchContext.Provider>
// BusRoute.js
const { resetSearch } = useContext(SearchContext);
const handleClick = stop => {
resetSearch();
history.push(`/stops/${stop}`);
};
return (
// some other JSX
<button onClick={() => handleClick(stop.code)}>{stop.name}</button>
);
history변경 사항을 들을 수 있습니다 .
useEffect(() => {
const unlisten = history.listen((location) => {
console.log('new location: ', location)
// do your magic things here
// reset the search: clear the results and the search input field
})
return function cleanup() {
unlisten()
}
}, [])
전역 검색 값을 제어하는 상위 구성 요소에서이 효과를 사용할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다