반응형
체크박스 멀티
/*
@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 |
댓글