ReactTag機能の実装
記事やブログの公開に主に使用されるラベル機能を実装しました.
ラベル機能の実装に慣れていないため,ベロフトの開発執筆部分を探した.
タグが存在する場合と存在しない場合を比較すると、タグを追加するたびにdivタグが生成されると判断できます.
すなわち、タグを作成した場合、タグを配列状態に含めてmapに戻すことができます.
まず、タグ全体を保存するために
Input Boxでは、タグをmapとして表示し、inputに必要な値を入力します.
tagに保存し、Enter(onKeyPress)を押してtagsに追加することができます.
(カンマとEnter...)
機能を実装した後,to−do−listの実装方法は非常に類似しており,原理を理解すれば容易に実装できる.
私が実装したコードは以下に添付されています.
ラベル機能の実装に慣れていないため,ベロフトの開発執筆部分を探した.
タグが存在する場合と存在しない場合を比較すると、タグを追加するたびにdivタグが生成されると判断できます.
すなわち、タグを作成した場合、タグを配列状態に含めてmapに戻すことができます.
まず、タグ全体を保存するために
tags state(array)
およびtag state
を作成した.Input Boxでは、タグをmapとして表示し、inputに必要な値を入力します.
tagに保存し、Enter(onKeyPress)を押してtagsに追加することができます.
(カンマとEnter...)
機能を実装した後,to−do−listの実装方法は非常に類似しており,原理を理解すれば容易に実装できる.
私が実装したコードは以下に添付されています.
function Tag() {
const [tags, setTags] = useState(["javascript", "react"]);
const [tag, setTag] = useState("");
const removeTag = (i) => {
const clonetags = tags.slice();
clonetags.splice(i, 1);
setTags(clonetags);
};
const addTag = (e) => {
setTag(e.target.value);
};
const handleKeyPress = (e) => {
if (e.key === "Enter") {
handleClick();
}
};
const handleClick = () => {
setTags([...tags, tag]);
setTag("");
};
return (
<Wrapper>
<Title>Tag</Title>
<TagContainer>
{tags.map((e, i) => (
<Hash key={i}>
<HashName>{e}</HashName>
<HashBtn onClick={() => removeTag(i)}>x</HashBtn>
</Hash>
))}
<InputBox
placeholder="Press enter to add tags"
onChange={(e) => addTag(e)}
onKeyPress={(e) => handleKeyPress(e)}
value={tag}
/>
</TagContainer>
</Wrapper>
);
}
const TagContainer = styled.div`
display: flex;
align-items: center;
border: 1px solid grey;
border-radius: 12px;
width: 60vw;
height: 60px;
`;
const Hash = styled.div`
display: flex;
justify-content: center;
align-items: center;
background-color: ${(props) => props.theme.blue};
border-radius: 12px;
padding: 0 10px;
margin: 10px;
height: 40px;
`;
const HashName = styled.h3`
color: ${(props) => props.theme.white.lighter};
margin-right: 10px;
`;
const HashBtn = styled.button`
border: none;
outline: 0;
border-radius: 50%;
width: 20px;
height: 20px;
background-color: ${(props) => props.theme.white.lighter};
cursor: pointer;
`;
const InputBox = styled.input`
border: none;
height: 30px;
font-size: 32px;
&:focus {
outline: none;
}
@media screen and (max-width: 820px) {
font-size: 20px;
}
`;
Reference
この問題について(ReactTag機能の実装), 我々は、より多くの情報をここで見つけました https://velog.io/@whljm1003/React-Tag-기능-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol