lundi 23 mars 2020

React How to handle checked and unchecked events for checkbox using typescript

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