[個人プロジェクト]Trablog-4タブ🔖

2356 ワード
React Tags テキストリンク
Tag🔖
旅行ブログを作成しているので、文章を地域別に分類したほうがいいと思いますが、分類の方法でラベルを貼って分類して検索できればいいと思います.だからTagを実現するには
何を利用しますか.(@pathofdev/react-tag-input)
https://www.npmjs.com/package/react-tag-input
一番多く使われているようですが、依存パッケージが多すぎて扱いにくいです.
そこでもっと簡単なライブラリを見つけました.
https://www.npmjs.com/package/@pathofdev/react-tag-input
npm i @pathofdev/react-tag-input
Documentに行ってみると、本当に簡単で直感的です.すぐ適用されます.
Customize
そのラベルがreadOnlyに設定されていると、表示されるだけです.私が欲しい機能はonClickに関数を追加して、各Tagをクリックするたびに検索ページにジャンプできるようにすることです.
したがって、クリックする必要があるTag containerは新しい構成部品を作成します.
export default function clickTags(props: TagsProps) {
  const [search, setSearch] = useState<string | undefined>();
  const tag = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (props.readOnly) {
      const tagList = tag.current?.childNodes[0].childNodes;
      tagList?.forEach((e: any) => {
        e.onclick = function () {
          setSearch(e.innerText);
        };
      });
    }
  }, []);

  return (
    <div ref={tag}>
      {search && <Redirect to={`/search?query=${search}`} />}
      <ReactTagInput {...props} />
    </div>
  );
}
そこで、作成した検索ページに移動できます!
(Python) BOJ - 1874. スタック数列
Androidカメラの原理解析(ソースコード)