掲示板検索ウィンドウ機能
結果
内容で欲しいキーワードを検索できます. 入力値がない場合、通知ウィンドウ が表示する.
コード#コード#
内容
コード#コード#
const [searchValue, setSearchValue] = useState(''); //검색창에서 입력값을 받는 state
const [filterValue, setFilterValue] = useState(''); //검색 필터링된 값으로 업데이트 됨
//[QnA] SearchValue에 입력값으로 업데이트
const handleSearch = e => {
setSearchValue(e.target.value);
};
//[QnA] 엔터를 누르면 searchCheck 함수를 호출함
const handleEnter = e => {
if (e.key === 'Enter') {
e.preventDefault();
searchCheck();
}
};
//[QnA] 입력값 확인 하는 함수
//입력값이 제목에 있는지, 글쓴이에 있는지 필터링
const searchCheck = () => {
const filter = posts.filter(
posts =>
posts.title.toLowerCase().includes(searchValue) ||
posts.writer.toLowerCase().includes(searchValue)
);
//입력값이 없으면 알림창 띄우기
if (!searchValue) alert('검색할 내용을 입력해주세요.');
else if (filter) setFilterValue(filter);
};
<tbody>
{/* 필터링된 입력값이 없으면 전체 게시물을, 아니면 필터링된 게시물을 보여줌 */}
{!filterValue
? posts.map(data => {
return (
<tr key={data.no}>
<BodyTd>{data.no}</BodyTd>
<BodyTd
onClick={handleTitle}
style={{ textAlign: 'left', cursor: 'pointer' }}
>
{data.title}
</BodyTd>
<BodyTd>{data.writer}</BodyTd>
<BodyTd>{today}</BodyTd>
</tr>
);
})
: filterValue.map(data => {
return (
<tr key={data.no}>
<BodyTd>{data.no}</BodyTd>
<BodyTd
onClick={handleTitle}
style={{ textAlign: 'left', cursor: 'pointer' }}
>
{data.title}
</BodyTd>
<BodyTd>{data.writer}</BodyTd>
<BodyTd>{today}</BodyTd>
</tr>
);
})}
</tbody>
Reference
この問題について(掲示板検索ウィンドウ機能), 我々は、より多くの情報をここで見つけました https://velog.io/@suminllll/게시판-검색창-기능テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol