如何在表单提交前监听事件并修改值？（父子组件场景）

1. 替换全局事件监听，改用父子组件直接通信 #

你当前用window.addEventListener('submit')的核心问题是：事件触发时机无法和父组件的提交逻辑同步，导致父组件先发请求，子组件才完成数据转换。改成父组件主动调用子组件的方法来处理数据转换即可解决：

• 子组件修改：移除全局事件监听，暴露数据转换方法

// 子组件：暴露给父组件调用的方法
export const prepareSubmitData = () => {
    // 将展示用的转换值恢复为key形式，务必更新到和父组件共享的formInfo中
    const keyValues = formattedData.filter(item => item.preselected).map(item => item.value);
    // 示例：如果用Vue的响应式状态，直接更新对应字段
    // formInfo.targetField = keyValues;
}

// 删除原有的全局监听代码
// onMount(async() => {
//     window.addEventListener('submit', handleSubmit)
// })

• 父组件修改：提交前先调用子组件方法，确保数据更新后再发请求

const submitEditForm = async (event: any) => {
    // 先调用子组件的方法恢复数据（需先获取子组件引用，比如Vue的ref）
    await childRef.value.prepareSubmitData();
    
    console.log(formInfo); // 此时已拿到正确的key形式数据
    const response = await updateAction(configs.update, props.rowData.id, formInfo);
    
    if (errorChecker(response)) {
        showToast($t('common.record_has_been_updated'), 'success');
        onClose(true);
    } else {
        onClose(false);
    }
}

2. 确保数据响应式更新 #

不要直接用value = ...赋值，必须使用框架的响应式API（比如Vue的ref/reactive、React的setState）更新数据，这样父组件才能实时获取到最新的转换后的值。如果用状态管理库，就在子组件的方法里提交状态更新，父组件等待状态同步完成后再提交表单。

3. 简化方案：父组件直接处理转换 #

如果子组件的formattedData能被父组件访问（比如通过props或状态管理），可以跳过父子通信，直接在父组件提交前完成转换：

const submitEditForm = async (event: any) => {
    // 直接从formattedData转换出key值
    const keyValues = formattedData.filter(item => item.preselected).map(item => item.value);
    // 生成带正确key的提交数据
    const submitData = { ...formInfo, targetField: keyValues };
    
    const response = await updateAction(configs.update, props.rowData.id, submitData);
    
    if (errorChecker(response)) {
        showToast($t('common.record_has_been_updated'), 'success');
        onClose(true);
    } else {
        onClose(false);
    }
}

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