Antd Select组件值变更时如何实现二次确认提示功能

核心逻辑非常直接：不要等组件给你提供变更前的钩子，直接把组件的值更新权限收回到业务层，用受控模式完全接管值的渲染逻辑，从根源上拦住非法更新。

具体实现步骤 #

• 第一步：将Select设置为完全受控组件
  不要让组件自己维护内部选中状态，把Select的value（Vue场景下是v-model绑定值）和业务层自己维护的状态做绑定，组件显示什么值完全由业务层的状态决定，组件本身没有私自更新值的权限。
• 第二步：拦截选择事件，不直接更新绑定值
  监听Select的值变更事件（一般是onChange/@change），事件触发拿到用户选择的新值时，第一时间不要修改绑定在Select上的状态，直接弹出二次确认框。
• 第三步：按确认框的操作分支处理逻辑
  • 用户点击确认：再把新选择的值更新到业务层维护的Select绑定状态上，组件此时才会渲染新的选中值，后续正常执行联动其他组件的业务逻辑即可。
  • 用户点击取消：不做任何状态更新操作，因为绑定在Select上的状态一直存的是旧值，组件会自动保持原来的选中状态，不会出现值跳变的问题。

代码示例（React + Ant Design 场景） #

import { useState } from 'react';
import { Select, Modal } from 'antd';

export default function LinkageForm() {
  // SelectA 绑定的真实渲染值，初始值按业务需求设置
  const [valueA, setValueA] = useState('initialOption');
  // 联动的SelectB值
  const [valueB, setValueB] = useState('');

  const handleAChange = (newSelectedVal) => {
    // 拿到新值先弹确认，绝对不先更新valueA
    Modal.confirm({
      title: '操作提示',
      content: '修改当前选项会同步变更关联组件的取值，确认提交修改？',
      onOk: () => {
        // 确认后才更新A的值，触发视图更新
        setValueA(newSelectedVal);
        // 执行B的联动逻辑
        const linkedBVal = getLinkedValueOfB(newSelectedVal);
        setValueB(linkedBVal);
      },
      onCancel: () => {
        // 取消时无操作，valueA保持旧值，Select自动显示原选中项
      }
    })
  }

  return (
    <div className="form-wrapper">
      <Select
        value={valueA}
        onChange={handleAChange}
        options={[
          { label: '选项一', value: 'opt1' },
          { label: '选项二', value: 'opt2' }
        ]}
      />
      <Select
        value={valueB}
        options={/* B组件的选项配置 */}
        placeholder="关联组件"
      />
    </div>
  )
}

注意事项 #

• 不要使用非受控模式实现这个需求：非受控模式下用户点击选项时，组件内部已经把选中值更新了，这时候再弹确认，哪怕用户点取消，你也需要额外写逻辑把内部值回滚，很容易出现状态不一致的问题。
• 这个方案和技术栈、UI框架无关：不管是Vue2/Vue3/React，不管用Element/Ant Design/原生Select，核心逻辑都是接管值的更新权，不需要依赖组件本身提供的beforeChange类钩子，适配性极强。

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