Switchのオンオフでdivタグのopenとcloseの表示を切り替えたいです。
Switchコンポーネント自体他のところでも使いまわせる風にしたくどのように実装したらいいでしょうか?
またSwitchコンポーネントはオンオフでbackgroundの色が違うのですがどうやって切り替えたらいいのでしょうか?
わかる人いましたらご教授お願いしたいです。
const User: FunctionComponent = () => { const [state, setState] = useState<boolean>(false) const isCheck = () => { setState(!state); }; return ( <> <Switch /> <div className="open"> 表示 </div> <div classname="close"> 非表示 </div> <>
import React, { FunctionComponent } from 'react'; import styled from 'styled-components'; const Check = styled.div` position: relative; width: 40px; height: 20px; margin: 0; .toggle-input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; } .toggle-label { width: 40px; height: 20px; background: #ccc; position: relative; display: inline-block; border-radius: 46px; transition: 0.3s; box-sizing: border-box; &:after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 100%; left: 0; top: 0; z-index: 2; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.3s; } } .toggle-input:checked { + .toggle-label { background-color: blue; &:after { left: 20px; } } } `; type Props = { isCheck: () => void; }; export const Switch: FunctionComponent<Props> = ({ isCheck }) => { return ( <Check> <input id="toggle" type="checkbox" className="toggle-input" onClick={isCheck} /> <label className="toggle-label" /> <span></span> </Check> ); };
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/10/08 06:52