본문 바로가기
react

[React] checkBox array 추가,변경,삭제

by 뇽꾸리 2022. 10. 13.
반응형

체크박스 멀티 

/*
      @Description: 파라미터 세팅 
    */
    const [param, setParam] = useState({
        name1: ['001'], 
        startDt : new Date(), 
        endDt : new Date(),   
    });
{
                                list && list.map((type,index) => {
                                        return ( 
                                            <span key={index} className="frmInp">
                                                <input type="checkbox"
                                                    name="name1"
                                                    value={type.id}
                                                    checked={param.name1.includes(type.id) ? true : false}
                                                    onChange={handleSingleCheck}
                                                />
                                            </span>
                                        )
                                })
                            }
/*
      @Description: checkBox 변경
    */
      const handleSingleCheck = e => {
        const { checked, name, value} = e.target;
        let tmpArr = param[name];
        if (checked) {
            if(!tmpArr.includes(value)){
                tmpArr.push(value)
            }
            setParam({
                ...param,
                [name]: tmpArr
            });
        } else {
            setParam({
                ...param,
                [name]: param[name].filter(d => d !== value)
            });
        }
    };

 

체크박스 싱글 


    const [searchParam, setSearchParam] = useState({
      
        checked : '',
    
    })
    
    
      /*
      @Description: 검색값 변경
    */
    const onSearchValueChange = e => {
        const { value, name } = e.target;

        setSearchParam({
            ...searchParam,
            [name]: value
        });
    };
    
    
    <Checkbox
                                                            name="checked"
                                                            value="1"
                                                            checked={searchParam.checked === "1" ? true : false}
                                                            onChange={onSearchValueChange}
                                                        >
                                                        </Checkbox>
 //array 기준 
 setData(data.map((d,i) => index === i ? {...d , activeInput : d.activeInput === false ? true : false} : d ))
반응형

'react' 카테고리의 다른 글

[React] 랜덤코드 생성  (0) 2022.10.07
[React] option checked,selected  (0) 2022.10.06
[React] onClick,onChange 매개변수여러개  (0) 2022.10.05
[React] 아임포트 (iamport) API 연동  (0) 2022.07.22
react bootstrap  (0) 2022.05.10

댓글