JavaScript
1export default function Selector(props) { 2 const changeValue = () => { 3 props.onChange((current) => !current); 4 } 5 6 const onClickEvent = () => { 7 if(props.isSelected = true){ 8 changeValue(); 9 setTimeout(changeValue,3000) 10 }else{ 11 changeValue(); 12 } 13 }; 14 15 return ( 16 <div className="Select"> 17 <Checkbox 18 icon={<AudiotrackOutlinedIcon />} 19 checkedIcon={<AudiotrackSharpIcon />} 20 defaultChecked={props.isSelected} 21 onChange={onClickEvent} 22 /> 23 {props.isSelected && ( 24 <div className="Select_on">現在チェックされています</div> 25 )} 26 {!props.isSelected && ( 27 <div className="Select_off">現在チェックされていません</div> 28 )} 29 </div> 30 ) 31} 32
上部のコードは、省略されていますが、チェックボックスにチェックが入っているときは「現在チェックされています」と表示され、チェックが入っていないときは「現在チェックされていません」と表示するようにしたものです。
onClickEventの中で、チェックを外して3秒後にチェックが自動で入るように書きました。
しかし、チェックを外して3秒たった時にprops.isSelectedの値は変わり、表示されるメッセージも「現在チェックされています」に変わるのですが、チェックボックスは空白のままで変わりません。
どのようにすればprops.isSelectedの内容とチェックボックスの状態を同じにすることができるのでしょうか。
ご回答よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー