React中如何禁用地址按钮的多选功能？

问题根源在于每个AddressButton组件自己维护了独立的选中状态，和父组件Addresses的选中状态冲突，导致多个按钮可以同时被选中。要实现单选，需要把选中状态的控制权统一交给父组件，具体修改如下：

1. 改造AddressButton.tsx，移除内部选中状态 #

删除组件内部的selectedItem状态，将选中状态和点击事件完全交由父组件控制：

// Common > AddressButton.tsx
// 移除内部的useState定义
// const [selectedItem, setSelectedItem] = useState<boolean>(false);

// 修改handlePress，调用父组件传入的onPress回调
const handlePress = () => {
    setAddressData(addressData);
    if (ratesData) setRatesData(null);
    if (selectedRate) setSelectedRate(null);
    // 通知父组件处理选中逻辑
    onPress?.();
};

// 组件接收父组件传入的isSelected和onPress属性
return (
    <HomeAddressContainer isSelected={isSelected}>
        <Pressable onPress={handlePress}>
            <HomeAddressRow>
                <HomeAddressIcon>
                    <SVGCustomIcon name={isSelected ? "HomeAddressIcon" : "HomeIconWhite"} />
                </HomeAddressIcon>
                <HomeAddressTitle>{name}</HomeAddressTitle>
                <HomeAddressName>{company}</HomeAddressName>
                <HomeAddressStreet>{street1}</HomeAddressStreet>
                <HomeAddressStreet>{city}, {zip}, {country}</HomeAddressStreet>
            </HomeAddressRow>
        </Pressable>
    </HomeAddressContainer>
);

2. 确保父组件Addresses.tsx统一管理选中状态 #

父组件已经维护了selectedItem（选中索引），现在需要将点击事件和选中状态正确传递给子组件，同时移除子组件外层的多余Pressable（避免重复绑定点击事件）：

// Components > Addresses.tsx
{addressesList.map((address: AddressData, index) => (
    <HomeAddress
        key={index}
        addressData={address}
        packageId={packageId}
        isSelected={index === selectedItem}
        // 将父组件的选中逻辑传递给子组件
        onPress={() => handlePress(address, index)}
    />
))}

原理说明 #

• 父组件通过selectedItem记录当前唯一选中的按钮索引，所有子组件的isSelected都通过index === selectedItem判断，确保同一时间只有一个按钮处于选中状态。
• 子组件不再维护自己的选中状态，点击时通知父组件更新选中索引，从根源上避免了多选问题。

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