如何在古腾堡块的“save()”中添加javascrip函数?

时间:2019-04-05 作者:Aalok Bhatwal

我已经创建了一个自定义的古腾堡块来创建一个表单。这个表单包含一个按钮,我想在这个按钮上附加一个脚本来进行表单验证,然后对后端进行AJAX调用以提交表单。

我已经在“编辑”功能中正确地完成了所有这些操作。在古腾堡编辑模式下,一切正常。

关于save函数有什么问题。首先,我无法在保存模式下使用按钮组件。如果我使用button元素并将函数作为onclick={OnHandleSubmit}附加到onclick,则花括号不会解析,我会得到最终html中的文本。

如果我在save render html中编写自己的函数,脚本中的花括号会导致问题。

我尝试在单独的js文件中编写我的函数并将其排队,但我得到了函数未定义的错误。

最后,我不得不求助于使用&;#123;etc在“保存”功能中替代脚本中的特殊字符。我觉得一定有更好的方法在保存模式下处理脚本。

请帮忙做这个。

谢谢

1 个回复
SO网友:Mehmood Ahmad

WordPress仅在其后端编辑器上使用React,而不是在前端。古腾堡的工作如下:

创建块并与之交互。(编辑函数)

  • 保存gutenberg时,将属性放入保存函数,该函数最终只返回html,WordPress使用注释识别块并存储与其相关的数据。如果从Visual Editor切换到代码编辑器,则可以查看这些注释。右上角的菜单可以帮助您进行切换

    如果你不喜欢,那么你可以使用一个额外的文件,比如frontend。在每个块中使用js,然后使用webpack将其捆绑,并使用php将其排队到wp_enqueue_scripts. 这就是WordPress目前的工作方式。

    我发现一些人使用这种方法在前端使用React,但在古腾堡的文档中没有找到任何相关内容。

    在save中返回一个自定义的react元素,而不是像html一样的实际元素<CustomElement />wp-element 依赖关系,因为我们需要在前端进行react,而wp元素是react的包装器,所以不需要使用任何外部库

  • 相关推荐