I want to mark the checkbox checked inside a subComponent with the help of forwardref but i am not getting the result. I have tried defaultChecked = {true}
defaultValue = {true}
inside input field but didn't succeed.
Here is the checkbox component
import { forwardRef, useEffect, useRef } from "react";
export const SubRowsCheckBox = forwardRef(({ indeterminate, ...rest }, ref) => {
const defaultRef = useRef();
const resolvedRef = ref || defaultRef;
useEffect(() => {
resolvedRef.current.defaultChecked = true
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<div class="flex items-center">
<input
type="checkbox"
ref={resolvedRef}
{...rest}
id="A3-yes"
name="A3-confirmation"
class="opacity-0 absolute h-8 w-8"
/>
</div>
</>
);
});
This is how I called the checkbox Component.
= useTable(
{
columns,
data,
state : {expanded},
},
useExpanded,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
...columns,
{
Header: "Choose Items",
id: "selection",
Cell: ({ row }) => (
(details.isSelected) ? (
<div>
<SubRowsCheckBox {...row.getToggleRowSelectedProps() } />
</div>
) : ( null
)
),
},
];
});
}
)
The component is rendered only if row has got some subRows. I have also tried resolvedRef.current.checked = true
. It marks the checkbox checked but it doesn't works for the all rows. Here are the results
These are the results of resolvedRef.current.checked = true
. The defaultChecked prop isn't changing anything.
Any kind of help will be highly appreciated.
I want to mark all the subrows checkbox checked for the first render and rest of it works fine.
Aucun commentaire:
Enregistrer un commentaire