Hi I am new to React and typescript. I am working on adding checked attribute for a checkbox but find it tricky. I searched across SO but still couldn't get it closer to working.
Here is what I am trying to do:
I am creating three checkbox components using a single child component[shown here]. They all have their own values that I need to pass dynamically.
interface InsuranceItemProps {
readonly className?: string;
readonly checked: boolean | undefined;
readonly accentedUnchecked?: boolean;
readonly imageUrl: string;
readonly errorMessage?: string;
readonly statusChecked?: boolean | undefined;
readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
readonly handleClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
readonly hasError?: boolean;
readonly title?: string;
readonly value?: number;
readonly description?: React.ComponentType;
}
export class InsuranceItem extends React.Component<
InsuranceItemProps,
{
readonly isExpanded: boolean;
readonly checkboxStatus: boolean;
readonly temp: boolean;
readonly checked: boolean;
}
> {
constructor(props) {
super(props);
this.state = {
isExpanded: false,
checkboxStatus: false,
temp: false,
checked: this.state.temp
};
this.handleClick = this.handleClick.bind(this);
this.onChange = this.onChange.bind(this);
}`
private onChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({ temp: e.currentTarget.checked });
}
private readonly handleClick = e =>
this.props.onChange({
currentTarget: { checked: e.currentTarget.checked }
} as any);
render() {
const unchecked = this.props.accentedUnchecked && this.props.checked === false;
return (
<label className="checkbox">
<input
type="checkbox"
checked={this.onChange} //Not working
onChange={this.props.onChange}
onClick={this.handleClick}
id={"test"}
data-id="0"
/>
);
The problem is I am not sure how to set the checked attribute, based onClick. when I use
checked={this.props.checked}
I am getting all checkboxes checked. Or if I use
checked={this.handleClick}
I get error saying
cannot assign void to a boolean" in typescript.
Any suggestion on how this can be resolved will be very helpful
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire