如何解决Mantine NumberInput无编辑权限时数值短暂变更的问题

我懂你的困扰——无权限用户操作组件时数值先跳一下再弹模态框，既不美观还容易误导人，偏偏还不能直接禁用组件。其实核心问题在于你没完全掌控受控组件的value更新逻辑，下面给你一个简单有效的解决方案：

核心思路 #

你的NumberInput是受控组件（绑定了value={saveEnabled.newSettings.cooldown}），组件显示的数值完全由这个state决定。我们只需要在无权限时拒绝更新这个state，同时正常触发模态框即可，这样数值就不会有任何变化。

修改后的代码示例 #

<NumberInput
  min={1}
  max={31536000}
  defaultValue={parseInt(value)}
  // 点击输入框时直接弹出模态框
  onSelect={() => {
    setModalOpen(true);
  }}
  onChange={(e) => {
    // 仅当用户有权限时，才执行数值更新逻辑
    if (isGuildPremium) {
      handleChange(e);
    }
    // 无论权限状态，都触发模态框
    setModalOpen(true);
  }}
  value={saveEnabled.newSettings.cooldown}
/>

方案为什么有效？ #

1. 受控组件特性加持：NumberInput的显示值完全由value绑定的state控制，只要我们不修改这个state，组件就会一直显示原有数值，不会出现短暂变更的情况。
2. 事件触发不受影响：我们没有禁用组件，所以点击输入框（onSelect）、操作上下箭头（onChange）的事件依然会正常触发，从而弹出模态框提示用户权限限制。
3. 逻辑清晰易维护：权限判断直接放在onChange回调里，有权限才执行更新，无权限只弹模态框，代码简洁易懂。

额外视觉优化建议 #

如果想让无权限状态的组件更直观地体现“可点击但不可编辑”，可以加个样式提示：

<NumberInput
  // 原有属性...
  styles={{
    input: isGuildPremium ? {} : { cursor: 'pointer', opacity: 0.8 }
  }}
/>

这样用户能快速感知到组件的交互状态。

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