본문 바로가기
notion/react_info

체크박스 테스트 파일입니다.

by 서수이 서수이 2021. 2. 7.
반응형

체크박스 테스트 파일입니다.

우선 선택 햇을 때 돌아갈 것입니다.

 

저도 테스트를 못해봤습니다.

import React,{useMemo, useState, useEffect} from 'react'

const init_row = [
  {
    label:'user000'
  } ,
  {
    label:'user001'
  }  ,
  {
    label:'user002'
  },
  {
    label:'user003'
  },
  {
    label:'user004'
  },
  {
    label:'user005'
  },
  {
    label:'user006'
  },
  {
    label:'user007'
  },
]

const ListTester = () => {
  const [list, setList] = useState(null)
  
  const handleClickCheckBox = (selectBox)=>{
    console.log(selectBox)
    setList((list ?? []).map((r)=>({...r, checked: r.label === selectBox.label })))
  };

  useEffect(() => {
    setList((init_row ?? []).map((r)=>({...r, checked: false})))
  },[init_row]);

  return (
    <div>
      <ul>
      {(list ?? []).map((r,idx) => {
        return <li key={idx} onClick={(e)=>{
          e.preventDefault();
          handleClickCheckBox(r);
          }}> 
            <label>
              <input type="checkbox" checked={r.checked} />
              {r.label ?? ''}</label>
        </li>
      })}
      </ul>
    </div>
  )
}

export default ListTester

 

반응형

댓글0