React如何跨组件共享图片选中状态并同步更新选中总数

解决方案 #

你可以通过状态提升实现多组件状态共享，将选中状态从子组件ArtImage提到父组件ArtSelection统一管理，即可同步更新选中计数，同时兼容div点击和表单控件触发选中逻辑。

核心改动点 #

• 给每一张图片添加唯一标识，用于定位修改选中状态
• 父组件维护所有图片的选中状态，将选中值和切换回调通过props传递给子组件
• 子组件删除内部独立的selected状态，完全复用父组件传入的状态和方法
• 若需要多选功能，建议将input的type从radio改为checkbox（原生radio同name属性下仅支持单选）

修改后代码 #

子组件 ArtImage

const ArtImage = ({ image, selected, onToggleSelect }) => {
  const handleSelect = () => {
    onToggleSelect(image.id);
  };

  return (
    <div
      onClick={handleSelect}
      style={{
        display: "inline-block",
        position: "relative",
        cursor: "pointer"
      }}
    >
      <input 
        type="checkbox" 
        checked={selected}
        onChange={handleSelect}
      />
      <img src={image.imageUrl} alt={`art-${image.id}`} />
    </div>
  );
};

父组件 ArtSelection

const ArtSelection = ({ art }) => {
  // 初始化图片数据，补充唯一id和初始选中状态
  const initialImages = art.map((item, index) => ({
    ...item,
    id: index, // 实际生产环境建议替换为后端返回的唯一业务id
    selected: false
  }));
  const [images, setImages] = React.useState(initialImages);

  // 切换图片选中状态
  const toggleSelect = (targetId) => {
    const updatedImages = images.map(item => {
      if (item.id === targetId) {
        return { ...item, selected: !item.selected };
      }
      // 若需求为单选，放开下方注释即可实现选中一个时自动取消其他选中
      // return { ...item, selected: false };
      return item;
    });
    setImages(updatedImages);
  };

  // 统计已选中图片数量
  const selectedCount = images.filter(item => item.selected).length;

  return (
    <div>
      <p>{selectedCount}/12 posts selected</p>
      {images.map(item => (
        <ArtImage
          key={item.id}
          image={item}
          selected={item.selected}
          onToggleSelect={toggleSelect}
        />
      ))}
    </div>
  );
};

跨多层组件共享方案 #

如果后续需要在更多层级的组件中共享该选中状态，可以根据业务复杂度选择：

• 组件层级不超过3层：继续向上提升状态到公共父组件
• 组件层级较深/状态需要全局共享：使用React Context 或者 Zustand、Jotai、Redux 等状态管理库实现

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