如何在父元素上触发子元素Checkbox的onChange事件？

我有一个基于@fluentui/react-components的ContactText组件，里面包含Checkbox并绑定了onChange逻辑。现在希望点击组件最外层的<div>时，也能触发这个Checkbox的onChange事件。已知可以用useRef实现，想了解其他方案。

组件代码如下：

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>
  );
};

方案1：抽离状态更新逻辑，外层div onClick直接调用 #

把onChange里的状态更新逻辑抽成独立函数，外层div的onClick触发该函数，同时给Checkbox的onClick添加stopPropagation避免重复触发：

const ContactText = ({ contact, contactKey, selectedContacts, setSelectedContacts }) => {
  // 抽离状态更新逻辑
  const handleContactToggle = (checked) => {
    setSelectedContacts((prevState: SelectedContactModel[]) =>
      checked
        ? [
            ...prevState,
            {
              key: contactKey,
              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((item) => item.key !== contactKey)
    );
  };

  return (
    <div onClick={() => {
      // 获取当前选中状态，取反后触发更新
      const isChecked = !!selectedContacts.find(item => item.key === contactKey)?.checked;
      handleContactToggle(!isChecked);
    }}>
      <img src={contactIcon} alt="Contact Icon" />
      <div>
        <Checkbox
          labelPosition="before"
          label={`${contact.firstname} ${contact.surname}`}
          checked={!!selectedContacts.find(item => item.key === contactKey)?.checked}
          onChange={(event, data) => handleContactToggle(data.checked)}
          onClick={(e) => e.stopPropagation()} // 阻止事件冒泡，避免重复触发外层div的onClick
        />
        {contact.email && <SecondaryText text={contact.email} />}
        {contact.telephone && <TertiaryText text={contact.telephone} />}
        {contact.mobile && <TertiaryText text={contact.mobile} />}
      </div>
    </div>
  );
};

注：这里把filter改成find更高效，因为只需要判断单个contact的选中状态；同时简化了空值判断（contact.email != ""改成contact.email）。

方案2：利用原生label的关联特性 #

Fluent UI的Checkbox会渲染原生的<input type="checkbox">，可以给Checkbox设置id，然后用原生<label>包裹整个外层内容，点击label会自动触发复选框的状态变化：

const ContactText = ({ contact, contactKey, selectedContacts, setSelectedContacts }) => {
  const checkboxId = `contact-checkbox-${contactKey}`;

  return (
    <label htmlFor={checkboxId} style={{ display: 'flex', cursor: 'pointer' }}>
      <img src={contactIcon} alt="Contact Icon" />
      <div>
        <Checkbox
          id={checkboxId}
          labelPosition="before"
          label={`${contact.firstname} ${contact.surname}`}
          checked={!!selectedContacts.find(item => item.key === contactKey)?.checked}
          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((item) => item.key !== contactKey)
            );
          }}
        />
        {contact.email && <SecondaryText text={contact.email} />}
        {contact.telephone && <TertiaryText text={contact.telephone} />}
        {contact.mobile && <TertiaryText text={contact.mobile} />}
      </div>
    </label>
  );
};

注意：需要给label设置合适的样式（比如display: flex）来保持原布局；同时Fluent UI的Checkbox本身的label会和原生label配合，不会冲突，点击整个label区域都会触发复选框的状态切换。

方案3：受控组件模式，维护本地选中状态 #

如果组件逻辑更复杂，可以把选中状态提升到本地，外层div点击时切换本地状态，再同步到父组件的selectedContacts：

const ContactText = ({ contact, contactKey, selectedContacts, setSelectedContacts }) => {
  // 从父状态中获取当前选中状态
  const [isChecked, setIsChecked] = useState(() => 
    !!selectedContacts.find(item => item.key === contactKey)?.checked
  );

  // 同步本地状态到父组件
  useEffect(() => {
    setSelectedContacts((prevState) => {
      const exists = prevState.some(item => item.key === contactKey);
      if (isChecked && !exists) {
        return [...prevState, {
          key: contactKey,
          checked: isChecked,
          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,
        }];
      } else if (!isChecked && exists) {
        return prevState.filter(item => item.key !== contactKey);
      }
      return prevState;
    });
  }, [isChecked]);

  return (
    <div onClick={() => setIsChecked(prev => !prev)} style={{ cursor: 'pointer' }}>
      <img src={contactIcon} alt="Contact Icon" />
      <div>
        <Checkbox
          labelPosition="before"
          label={`${contact.firstname} ${contact.surname}`}
          checked={isChecked}
          onChange={(event, data) => setIsChecked(data.checked)}
          onClick={(e) => e.stopPropagation()}
        />
        {contact.email && <SecondaryText text={contact.email} />}
        {contact.telephone && <TertiaryText text={contact.telephone} />}
        {contact.mobile && <TertiaryText text={contact.mobile} />}
      </div>
    </div>
  );
};

这种方式适合需要在组件内做更多状态相关逻辑的场景，本地状态和父状态保持同步。

内容的提问来源于stack exchange，提问作者tomtomdam