开发者社区> 问答> 正文

宜搭通过JS修改组件状态,编辑的时候失效

image.png

如果通过上图设置组件状态为只读,提交的时候组件为只读,但是后来编辑的时候之前通过JS设置的只读的组件又可以编辑了。

有什么办法,动态设置组件的状态为只读,之后编辑的时候还是只读。

展开
收起
啊里吧吧小叼民-31061 2023-05-18 15:52:06 364 0
5 条回答
写回答
取消 提交回答
  • 值得去的地方都没有捷径

    根据你提供的信息来看,问题可能存在于组件状态是在前端动态设置的而不是从后端获取状态后设置的,可以尝试以下方法:

    在设置状态时,同时将状态的值存储在后端(例如数据库或者本地存储)。下次编辑时,从后端获取状态值,然后再动态设置组件状态。

    在设置状态时,使用一些标记来确定是否应该允许修改组件状态。例如,可以设置一个“可编辑”标记,只有该标记为真时,才允许状态可以进行修改。提交后将状态标记为false,之后无论怎么编辑都不能修改状态了。

    另外这个问题可能与组件状态的绑定方式有关。你需要确保在每次重新渲染组件时,只是逐个渲染组件状态(包括只读状态),而不是重新设置所有组件的状态。组件应该始终与同一state值绑定。

    希望这些方法可以帮助你解决问题。

    2023-05-19 08:32:08
    赞同 展开评论 打赏
  • 公众号:网络技术联盟站,InfoQ签约作者,阿里云社区签约作者,华为云 云享专家,BOSS直聘 创作王者,腾讯课堂创作领航员,博客+论坛:https://www.wljslmz.cn,工程师导航:https://www.wljslmz.com

    宜搭中在页面编辑器中拖放布置的组件的状态由页面编辑器维护,如果通过JS代码动态修改组件状态的话,编辑状态下无法看到这些修改。这是因为编辑状态下宜搭页面编辑器会将编辑器自己维护的组件状态覆盖掉JS修改的状态,同时页面编辑器执行过 JS 之后可能会将组件状态还原为之前配置的值,以确保修改组件状态不会影响到原有的页面设计和布局。

    因此,如果需要在编辑状态下实时预览 JavaScript 修改的组件状态,您可以在宜搭页面编辑器中使用自定义脚本组件。自定义脚本组件提供一个代码区域,您可以在其中实时编写 JavaScript 代码,并预览结果。在自定义脚本组件中,您可以使用setInterval等函数进行定时更新状态,并使用组件的 API 方法来获取和设置组件的状态。

    自定义脚本组件仅供开发和调试使用,不建议在生产环境中使用。在生产环境中,建议使用组件的 API 方法来修改组件状态或者通过绑定组件属性和数据来实现组件状态的动态变化。

    2023-05-18 18:42:35
    赞同 展开评论 打赏
  • 可能是因为在编辑模式下,宜搭会阻止JS代码的执行,以避免误操作导致组件状态异常。您可以尝试在预览模式下运行JS代码,看看是否能够成功修改组件状态。如果还存在问题,建议您联系宜搭客服进行咨询和解决。

    2023-05-18 17:06:59
    赞同 展开评论 打赏
  • 出现这种情况是因为在宜搭编辑器中,组件状态不是永久的,即使在JS中设置了组件的状态为只读,但是在提交表单后,状态仍然会根据数据源中的值进行更新。因此,如果需要在编辑的时候也保持组件状态为只读,可以通过以下两种方式来实现:

    1. 在数据源中添加一个字段,用于记录组件的状态,在JS中设置组件状态的同时,将状态也保存到数据源中。在提交表单后,如果需要在编辑的时候保持组件状态为只读,则需要在数据源中保存相应的状态值,并在JS中读取数据源中的状态进行设置。

    2. 在组件的扩展属性中添加一个独立于数据源的字段,用于记录组件状态,在JS中设置组件状态的同时,将状态也保存到扩展属性中。在提交表单后,如果需要在编辑的时候保持组件状态为只读,则无需修改数据源,直接在JS中读取扩展属性中的状态进行设置即可。

    不管选择哪种方式,都需要在提交表单后,使用JS将组件状态设置为数据源或扩展属性中保存的状态值,以保证在编辑的时候可以保持组件状态的一致性。

    2023-05-18 17:03:02
    赞同 1 展开评论 打赏
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。

    宜搭组件里有设置只读的按钮,可以打开该按钮。看截图你设置的是禁用,和只读不是一个概念。

    2023-05-18 17:12:25
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载