使用Syncfusion Scheduler保存事件时遇组件重渲染值重置问题

问题描述 #

使用Syncfusion Scheduler时，点击保存按钮后组件疑似重渲染并重置值。例如选择日期选择器的时间后，change事件能获取新值，但点击保存时，值又变回当前时间。训练师下拉框曾出现类似问题，目前通过读取previousItemData临时解决，希望彻底阻止该现象，让保存按钮直接读取组件当前值，避免触发重渲染。

用户提供的代码：

function onPopupOpen(args) {
    if (args.type === 'Editor') {
        var eventData = args.data;

        var startElement = args.element.querySelector('#StartTime');
        var startDrop = startElement.classList.item(3);

        var startPicker = startElement.ej2_instances[0];
        startPicker.change = function () {
            eventData.StartTime = startPicker.value;
        };

        var processElement = args.element.querySelector('#TrainerId');

        var dropdown = document.getElementById("TrainerId").ej2_instances[0];
        dropdown.previousItemData = null;
        var saveButton = args.element.querySelector('.e-event-save');

        saveButton.onclick = function () {
            console.log('save clicked');
            eventData.StartTime = startPicker.value;

            if (!dropdown.previousItemData) {
                console.log('Choose a trainer');
            } else {
                eventData.TrainerId = dropdown.previousItemData.Id;
            }
        };
    }
}

解决方案 #

1. 不要覆盖组件内置事件 #

你直接给startPicker.change赋值的方式会替换Scheduler编辑器的内置事件逻辑，导致组件无法正确同步值到eventData。改用事件监听的方式添加自定义逻辑：

// 替换原startPicker.change的赋值代码
startPicker.addEventListener('change', function () {
    eventData.StartTime = startPicker.value;
});

2. 利用Scheduler的actionBegin事件处理保存逻辑 #

不要直接绑定保存按钮的onclick事件，Scheduler提供的actionBegin事件会在保存动作触发时执行，此时能直接获取编辑器最新值，避免重渲染导致的重置：

function onActionBegin(args) {
    // 监听事件创建或修改的请求
    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {
        // 获取日期选择器实例
        var startPicker = document.querySelector('#StartTime').ej2_instances[0];
        // 获取训练师下拉框实例
        var dropdown = document.getElementById("TrainerId").ej2_instances[0];
        
        // 更新事件的开始时间
        args.data.StartTime = startPicker.value;
        
        // 校验训练师选择
        if (!dropdown.value) {
            args.cancel = true; // 阻止保存操作
            console.log('Choose a trainer');
        } else {
            args.data.TrainerId = dropdown.value.Id;
        }
    }
}

在Scheduler初始化时注册该事件：

<ejs-scheduler id='Scheduler' actionBegin='onActionBegin' ...></ejs-scheduler>

3. 移除临时的previousItemData逻辑 #

使用actionBegin事件后，直接通过dropdown.value就能获取当前选中的训练师数据，无需依赖previousItemData临时属性，代码更稳定可靠。

4. 保证数据同步性 #

如果是框架环境（如React/Vue），需确保eventData的更新能被框架检测到；纯JS场景下，利用Scheduler内置事件即可保证数据与组件状态同步。

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