How to handle an event of a child element, on a parent element?

Question

I have a component that contains a Checkbox component from the @fluentui/react-components library, and I am using an onChange event on the Checkbox component.

const ContactText = ({ contact, contactKey, selectedContacts, setSelectedContacts }) => {

  return (
    <div>
      <img src={contactIcon} alt="Contact Icon" />
      <div>
        <Checkbox
          labelPosition="before"
          label={`${contact.firstname} ${contact.surname}`}
          checked={selectedContacts.filter((contact) => contact.key == contactKey).checked}
          //@ts-ignore - Ignore event parameter on onChange
          onChange={(event, data) => {
            setSelectedContacts((prevState: SelectedContactModel[]) =>
              data.checked
                ? [
                    ...prevState,
                    {
                      key: contactKey,
                      checked: data.checked,
                      companyKey: contact.companyKey,
                      companyName: contact.companyName,
                      individual: contact.individual,
                      title: contact.title,
                      firstname: contact.firstname,
                      surname: contact.surname,
                      telephone: contact.telephone,
                      mobile: contact.mobile,
                      retired: contact.retired,
                      address: contact.address,
                      postcode: contact.postcode,
                      email: contact.email,
                    },
                  ]
                : prevState.filter((contact) => contact.key !== contactKey)
            );
          }}
        />
        {contact.email != "" ? <SecondaryText text={contact.email} /> : <></>}
        {contact.telephone != "" ? <TertiaryText text={contact.telephone} /> : <></>}
        {contact.mobile != "" ? <TertiaryText text={contact.mobile} /> : <></>}
      </div>
    </div>
  );
};

I want to have the onChange to happen when I click the outermost div of the ContactText component. I have seen people using useRef although I am wondering if there are different ways of doing this.

I saw this post: stackoverflow.com/questions/55456604/… Would this be a solution I could take? — tomtomdam
– tomtomdam, Commented Jan 22, 2024 at 16:50
That's exactly what you need. This answer (the updated with hooks portion) — Mike K
– Mike K, Commented Jan 22, 2024 at 17:25
Don't forget that you can also declare the onChange handler in your parent component and just pass it down as a prop to your ComtactText and then pass that to CheckBox. — Mike K
– Mike K, Commented Jan 22, 2024 at 17:29

Mike K · Accepted Answer · 2024-01-22 17:50:05Z

Try this

const ContactText = React.forwardRef<{ onChange: (event: any, data: any) => void; scrollIntoViewOnClick: () => void }, HTMLDivElement>(({ contact, contactKey, selectedContacts, setSelectedContacts }, ref) => {
  React.useImperativeHandle((ref) => ({
    // You could name this whatever you want, we'll call it 'onChange'
    onChange: handleChange,
    // Just for the sake of this example and what 'useImperativeHandle' is used for
    scrollIntoViewOnClick: () => {
      // Logic to query for your div on the page and then scroll into view
      console.log('should scroll into view');
    }
  }));

  const handleChange = (event, data) => {
            setSelectedContacts((prevState: SelectedContactModel[]) =>
              data.checked
                ? [
                    ...prevState,
                    {
                      key: contactKey,
                      checked: data.checked,
                      companyKey: contact.companyKey,
                      companyName: contact.companyName,
                      individual: contact.individual,
                      title: contact.title,
                      firstname: contact.firstname,
                      surname: contact.surname,
                      telephone: contact.telephone,
                      mobile: contact.mobile,
                      retired: contact.retired,
                      address: contact.address,
                      postcode: contact.postcode,
                      email: contact.email,
                    },
                  ]
                : prevState.filter((contact) => contact.key !== contactKey)
            );
          };

  return (
    <div ref={ref}>
      <img src={contactIcon} alt="Contact Icon" />
      <div>
        <Checkbox
          labelPosition="before"
          label={`${contact.firstname} ${contact.surname}`}
          checked={selectedContacts.filter((contact) => contact.key == contactKey).checked}
          //@ts-ignore - Ignore event parameter on onChange
          onChange={handleChange}
        />
        {contact.email != "" ? <SecondaryText text={contact.email} /> : <></>}
        {contact.telephone != "" ? <TertiaryText text={contact.telephone} /> : <></>}
        {contact.mobile != "" ? <TertiaryText text={contact.mobile} /> : <></>}
      </div>
    </div>
  );
});

useImperativeHandle enables you to expose methods that only you want to be available outside of your component.

cbr · Accepted Answer · 2024-01-22 16:34:14Z

You can either add a onClick etc on the div element and do what you do inside the onChange in the Checkbox (although you will need to compute checked like you do in the render), or you can just change the <div> into a <label> as clicking on a label will delegate the click to whichever <input> element it wraps (or has a for with a matching ID).

 const ContactText = ({ contact, contactKey, selectedContacts, setSelectedContacts }) => {
  return (
    <label> {/* <------------ */}
      <img src={contactIcon} alt="Contact Icon" />
      <div>
        <Checkbox
          labelPosition="before"
          label={`${contact.firstname} ${contact.surname}`}
          checked={selectedContacts.filter((contact) => contact.key == contactKey).checked}
          //@ts-ignore - Ignore event parameter on onChange
          onChange={(event, data) => {
            setSelectedContacts((prevState: SelectedContactModel[]) =>
              data.checked
                ? [
                    ...prevState,
                    {
                      key: contactKey,
                      checked: data.checked,
                      companyKey: contact.companyKey,
                      companyName: contact.companyName,
                      individual: contact.individual,
                      title: contact.title,
                      firstname: contact.firstname,
                      surname: contact.surname,
                      telephone: contact.telephone,
                      mobile: contact.mobile,
                      retired: contact.retired,
                      address: contact.address,
                      postcode: contact.postcode,
                      email: contact.email,
                    },
                  ]
                : prevState.filter((contact) => contact.key !== contactKey)
            );
          }}
        />
        {contact.email != "" ? <SecondaryText text={contact.email} /> : <></>}
        {contact.telephone != "" ? <TertiaryText text={contact.telephone} /> : <></>}
        {contact.mobile != "" ? <TertiaryText text={contact.mobile} /> : <></>}
      </div>
    </label>
  );
};

tomtomdam · Accepted Answer · 2024-01-25 09:26:32Z

Based on @Mike K's answer and another answer I found, this is what I came up with. This lets me call onChange from the div element outside of the Checkbox element.

const ContactText = React.forwardRef(
  ({ contact, contactKey, selectedContacts, setSelectedContacts }: any, ref: any) => {
    const [checked, setChecked] = useState(false);

    React.useImperativeHandle(
      ref,
      () => {
        return {
          onChange: handleChange,
        };
      },
      []
    );

    // @ts-ignore: next-line - Ignore event parameter on onChange
    const handleChange = (event, data) => {
      setChecked(!checked);

      setSelectedContacts((prevState: SelectedContactModel[]) =>
        data.checked
          ? [
              ...prevState,
              {
                key: contactKey,
                checked: data.checked,
                companyKey: contact.companyKey,
                companyName: contact.companyName,
                individual: contact.individual,
                title: contact.title,
                firstname: contact.firstname,
                surname: contact.surname,
                telephone: contact.telephone,
                mobile: contact.mobile,
                retired: contact.retired,
                address: contact.address,
                postcode: contact.postcode,
                email: contact.email,
              },
            ]
          : prevState.filter((contact) => contact.key !== contactKey)
      );
    };

    return (
      <div ref={ref}>
        <img src={contactIcon} alt="Contact Icon" />
        <div>
          <Checkbox
            labelPosition="after"
            label={`${contact.firstname} ${contact.surname}`}
            checked={selectedContacts.filter((contact: SelectedContactModel) => contact.key === contactKey).checked}
            onChange={handleChange}
          />
          {contact.email != "" ? <SecondaryText text={contact.email} /> : <></>}
          {contact.telephone != "" ? <TertiaryText text={contact.telephone} /> : <></>}
          {contact.mobile != "" ? <TertiaryText text={contact.mobile} /> : <></>}
        </div>
      </div>
    );
  }
);

Collectives™ on Stack Overflow

How to handle an event of a child element, on a parent element?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related