[2番目の項目]GREAM-Radioを使用したファミリー実装
🏅 Carouselで達成した目標
「
labelをクリックして画像に移動&移動時に色あせ効果を与える
Q.labelとラジオはどうやって接続しますか?
labelのプロパティfor=
<Controls>
{RADIOS.map(id => {
return (
<Label key="id" htmlFor={id}>
<Radio
type="radio"
name="radio"
id={id}
/>
</Label>
);
})}
</Controls>Q.複数のタグのうち、クリックしたタグに対応する画像のみを表示する方法
コード
const Carousel = () => {
const [buttonId, setButtontId] = useState('r1');
...
const handleRadioChange = e => {
setButtontId(e.target.value);
};
...
return (
...
<Controls>
{RADIOS.map(id => {
return (
<Label key="id" htmlFor={id} checked={id == buttonId}>
<Radio
type="radio"
name="radio"
id={id}
value={id}
onChange={handleRadioChange}
/>
</Label>
);
})}
</Controls>
...
)};
...
const Image = styled.img.attrs(props => ({
src: 'http://source.unsplash.com/1000x1000/?flower',
}))`
position: absolute;
height: 70%;
width: 70%;
transition: all 0.5s linear;
box-shadow: 2px 2px 5px #000;
border-radius: 1%;
opacity: ${({ checked }) => (checked ? 1 : 0)};
`;次のボタンをクリックして次の画像に移動
Q.state buttonIdを使えばいいのですが、どうやって使うのでしょうか？
上記のパラメータid==buttonIdと比較したcheckedプロパティが真の場合、コードを記述して画像を表示するので、buttonIdを次のidに設定するだけでよい.
buttonIdに格納されているIDは
r1の形式であり、数字のみを利用するために変数を個別に宣言し、sliceでインデックス1の対応する部分のみを格納する.論理を構成し、次のボタンを押すと、idの数字部分に格納された変数1のみが加算され、最後尾でボタンを押すと、最初のidが設定される.
const moveRight = () => {
const changedNum = Number(buttonId.slice(1));
setButtontId(`r${changedNum + 1}`);
changedNum === RADIOS.length && setButtontId(`r1`);
};
return (
...
<LeftButton onClick={moveLeft}>
<i class="fas fa-chevron-left" />
</LeftButton>
...
);前の画像に移動するには、前のボタンをクリックします。
前のボタンは次のボタンと論理的に似ています.次のボタンを押したときに1を足すと、前のボタンから1を引くことができ、最初の画像であればbuttonIdを末尾画像のidに再設定することができます.
const moveLeft = () => {
const changedNum = Number(buttonId.slice(1));
setButtontId(`r${changedNum - 1}`);
changedNum === 1 && setButtontId(`r${RADIOS.length}`);
};完成!
Reference
この問題について([2番目の項目]GREAM-Radioを使用したファミリー実装), 我々は、より多くの情報をここで見つけました https://velog.io/@silviaoh/2nd-Project-GREAM-Radio-Carousel-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol