如何在MenuItem内显示IconButton且选项选中时隐藏该按钮

要实现的交互效果：

• 未选中状态下MenuItem内正常展示删除IconButton：
• 对应MenuItem被选中时，隐藏内部的IconButton：

核心逻辑很简单：先拿到Select组件当前的选中值，遍历渲染选项时判断当前项是否被选中，选中就不渲染内部的IconButton即可，另外要注意给按钮加事件阻止冒泡，避免点删除的时候顺带选中当前选项。

1. 首先给带select属性的TextField绑定选中状态，你之前只写了onChange没存受控值，补上value属性对应你存选中项的state即可。
2. 渲染IconButton前加判断，只有当前遍历的支付方式和选中值不一致时才渲染按钮。
3. 给IconButton的点击事件加e.stopPropagation()阻止事件冒泡，不然点击删除时事件会传到外层MenuItem，自动选中当前项，不符合交互预期。

修正后的完整代码 #

// 记得提前声明选中项的state，比如：
// const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);

<TextField
  label="Payment Method History"
  select
  fullWidth
  variant="outlined"
  name="paymentMethod"
  value={selectedPaymentMethod}
  onChange={(e) => {
    handlePaymentMethodHistoryChange(e.target.value);
    setSelectedPaymentMethod(e.target.value);
  }}
>
  {
    paymentMethodHistory?.map((paymentMethod) => (
      <MenuItem key={paymentMethod._id} value={paymentMethod} style={{ width: '100%' }}>
        <Box width="100%" display="flex" justifyContent="space-between" alignItems="center">
          {`${paymentMethod.accountHolderName} - ${paymentMethod.bank.name}`}
          {/* 非选中项才展示删除按钮 */}
          {paymentMethod._id !== selectedPaymentMethod?._id && (
            <IconButton 
              onClick={(e) => {
                e.stopPropagation();
                deletedPayMethod(paymentMethod._id);
              }} 
              size="small"
            >
              <Delete color="error" fontSize="inherit" />
            </IconButton>
          )}
        </Box>
      </MenuItem>
    ))
  }
</TextField>

注意事项 #

• 比对选中状态时优先用_id这类唯一标识判断，不要直接比对整个对象，避免对象引用不同导致判断失效
• 如果删除支付方式后刚好删掉的是当前选中项，记得同步清空selectedPaymentMethod的状态，避免出现值不存在的异常
• 最终效果：下拉展开时未选中项显示删除按钮，选中项不显示；选中后收起下拉，输入框内的选中文本也不会附带图标，和参考效果一致。

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