开发者社区> 问答> 正文

宜搭子表单中,如何用onchange设置,将两个级联组件的最后一级值相乘,赋值给一个文本组件?

已解决

宜搭子表单中,如何用onchange设置,将两个级联组件的最后一级值相乘,赋值给一个文本组件?

展开
收起
社区小老弟 2024-10-25 14:44:27 11 0
1 条回答
写回答
取消 提交回答
  • 推荐回答

    要在宜搭子表单中利用onChange事件设置,实现两个级联组件最后一级值相乘并赋值给一个文本组件,您可以按照以下步骤操作:

    监听级联组件变化:

    对于两个级联组件,假设分别为cascadeComponent1和cascadeComponent2,您需要分别为它们的onChange事件编写处理函数。这将在用户更改选择时触发。
    获取级联组件值:

    在每个级联组件的onChange事件处理函数中,通过event.value获取当前选中的最后一级值。例如,对于cascadeComponent1,您会得到value1;对于cascadeComponent2,则得到value2。
    计算乘积:

    在任一onChange函数内部(或合并处理这两个事件以减少冗余),将value1和value2相乘得到乘积结果。例如,let product = value1 * value2;。
    更新文本组件值:

    使用await page.setComponentValue('textComponentId', product.toString());方法,将计算得到的乘积结果赋值给文本组件。这里textComponentId是您希望显示乘积结果的文本组件的ID。
    合并事件处理逻辑(可选):

    如果希望在一个函数内同时处理两个级联组件的变化并计算,可以设计一个统一的处理逻辑,确保每次任一组件变化时都重新计算并更新文本组件。
    代码示例(基于宜搭的JavaScript处理逻辑):

    export async function onChangeComponent1({ value }) {
    await updateProduct(value, getSecondComponentValue());
    }

    export async function onChangeComponent2({ value }) {
    await updateProduct(getFirstComponentValue(), value);
    }

    async function updateProduct(value1, value2) {
    if (value1 && value2) {
    let product = value1 * value2;
    await page.setComponentValue('textComponentId', product.toString());
    }
    }

    function getFirstComponentValue() {
    // 实现获取第一个级联组件当前值的逻辑
    }

    function getSecondComponentValue() {
    // 实现获取第二个级联组件当前值的逻辑
    }
    请根据实际情况调整组件ID和具体的值获取逻辑。这样,每当两个级联组件的值发生变化时,文本组件就会自动更新为它们乘积的结果。

    2024-10-25 14:51:37
    赞同 14 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载