I have parent component SelectBoxGroup
and child component SelectBox
. I wanted to add the select all
option to the SelectBoxGroup
. But i got this error;
Property 'checked' does not exist on type 'EventTarget | (EventTarget & HTMLInputElement)'. Property 'checked' does not exist on type 'EventTarget'
.
function SelectBox({
...
}: React.HTMLAttributes<HTMLInputElement> & SelectBoxProps) {
const { register } = useFormContext();
const { ref, ...rest } = register(name, {
onChange,
});
return (
<div>
<input
type="checkbox"
checked={isChecked}
value={value}
{...props}
{...rest}
/>
<label>{label}</label>
</div>
);
}
export function SelectBoxGroup({
...
}: React.HTMLAttributes<HTMLInputElement> & SelectBoxGroupProps) {
const [checkAllChecked, setCheckAllChecked] = useState(false);
function handleCheckAll(checked: boolean) {
setCheckAllChecked(checked);
onChangeHandler?.(
options.map(option => ({
...option,
isChecked: checked,
}))
);
}
return (
<div>
{showCheckAll && (
<SelectBox
id={'check-all}
isChecked={checkAllChecked}
onChange={e => handleCheckAll(e.target.checked)} ////ERROR IS HERE
label="Check all"
value="Check all"
name={""}
/>
)}
<div
role="group"
>
{options?.map((option, index) => (
<SelectBox
key={option.value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
onChangeHandler?.(e);
}}
name={name}
label={option.label}
value={option.value}
/>
))}
</div>
</div>
);
}
Aucun commentaire:
Enregistrer un commentaire