本文详解如何在 vue 项目中通过 `react-wrapper` 集成 react 表单控件，并实现与 vue 响应式数据（如 `v-model.number`）等效的双向同步，重点解决 `handlechange` 回调中更新 vue 模型后表单不响应的问题。
在 Vue 项目中逐步迁移表单逻辑至 React 时，常见做法是封装 React 组件为 Vue 可调用的
正确做法是：Vue 端维护单一响应式源（如 ref 或 data 字段），将其作为 value prop 下发给 React 组件；同时，在 handleChange 中同步更新该源，并确保 React 组件始终读取最新值。以 Vue 3 Composition API 为例：
// VueComponent.vue <script setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps<{
value: number | string
isDisabled?: boolean
showControls?: boolean
}>()
const emit = defineEmits(['update:value'])
// ✅ 使用 ref 作为响应式数据源（支持 .value 访问）
const internalValue = ref(props.value)
// ✅ handleChange 必须触发 Vue 的响应式更新，并通知父组件（如需）
const handleChange = (val: string) => {
// 根据原 v-model.number 行为做类型转换
const numericVal = Number(val)
internalValue.value = isNaN(numericVal) ? '' : numericVal
// 若父组件使用 v-model.number="value"，需触发 update:value 事件
emit('update:value', internalValue.value)
}对应
<react-wrapper :component="ReactInput" :handleChange="handleChange" :value="internalValue.value" />
而在 ReactInput 组件内部，必须严格遵循受控组件模式：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
// ReactInput.tsx
import React from 'react'
interface ReactInputProps {
value: number | string
handleChange: (val: string) => void
}
export const ReactInput: React.FC<ReactInputProps> = ({
value,
handleChange
}) => {
return (
<input
type="number"
value={value} // ✅ 必须绑定 value（即使为 number，React 期望 string）
onChange={(e) => handleChange(e.target.value)} // ✅ 同步触发 Vue 更新
disabled={false} // 由 Vue 控制，此处可忽略或透传
/>
)
}⚠️ 关键注意事项：
- value 类型一致性：HTML 的 e.target.value 永远是字符串，React 不自动转数字。若需数值行为（如 v-model.number），必须在 handleChange 中手动 Number(val) 并校验 isNaN。
- 事件选择：优先使用 onChange（React 官方推荐），而非 onInput —— 虽然 onInput 触发更及时，但 onChange 在失去焦点或回车时也触发，语义更符合表单提交场景，且与 Vue 的 change 事件对齐。
-
Vue 父组件绑定：若父组件使用 v-model.number="form.value"，则子组件（
）必须支持 .sync / v-model 语法糖，即监听 update:value 事件并 $emit('update:value', ...)，否则 v-model.number 无法生效。 - 性能优化：避免在 handleChange 中直接调用 this.$forceUpdate() 或重复创建函数。使用 ref + watch 或 computed 可进一步解耦，但基础场景下 ref.value 直接赋值已足够高效。
总结：Vue 与 React 的双向绑定本质不同，不可简单映射 v-model 到 onChange。核心在于以 Vue 的响应式数据为唯一事实源，React 组件仅作为受控视图渲染器。只要确保 value prop 实时同步、handleChange 正确更新源数据并触发必要事件，即可无缝复现 v-model.number 的行为。
