본문 바로가기

CheckBox3

[React.js] 초보자도 쉽게 따라하는 checkbox defualt로 체크 하기 안녕하세요. 리엑트 하다가 checkbox 사용 예시는 많은데, 기존에 데이터를 미리 디폴트로 체크 해놓아햐 하는 경우가 발생 합니다. 일단 체크박스 생성을 합니다 그 다음 해당 input에 해당 value값을 넣어 줍니다 예를 들어, 우리는 기존의 List 배열과 , 체크된 리스트를 갖고있을 checkList 배열을 선언해 줍니다 const [list, setList] = usestate(['a','b','c','d']); const [checkedList, setCheckedList] = useState([]); 위 체크 박스를 반복문으로 돌려서 체크박스를 생성 해 줍니다 list.map((item) => { return( ) } ); 이렇게 생성해주면 value값은 어디에도 나타나지않고 hidden.. 2022. 11. 28.
[React js] how to make toggle by input type checkbox Hello this is GOJIP programmer. I just started write for share information about React js. Usually, we use checkbox like this, but sometimes we use this with making toggle. When I foung this with google, I only found this, they told me to use "defualtvlaue" But didn't work really becuse input type is checkbox. Here is how I made, const [checked, setChecked] = React.useState(true); setChecked(!ch.. 2022. 7. 5.
[React js] input type checkbox로 toggle 만들기 안녕하세요 . 고집 프로그래머 입니다. 최근에 재택을 시작하면서 유익한 React 정보를 자주 올리려고 합니다. 기존 형식으로 네모 체크박스 이런 형태를 많이 보셨을 텐데요 , 간혹가다 인데, 토글(toggle)형태로 표현되는 경우가 있습니다. 다른것이 문제되는 건 없는데, defualt value 설정때문에 저는 조금 어려웠습니다. 기존에 구글링 하면, 이런식으로 defualtValue로 표현했는데, type이 checkbox다보니 해당 기능은 잘 안먹히는 경우가 많았습니다. 그래서 저는 , const [checked, setChecked] = React.useState(true); setChecked(!checked) /> 이렇게 간단히 구현할 수 있었습니다. 만약 API에서 불러오는 값을 defua.. 2022. 7. 5.