Question

我一直在到处搜索以找出如何在gutenberg块中添加事件。我正在努力使用ACF和Foundation添加手风琴系统。我已经使用ACF创建了一个块，字段和模板。我希望我的用户能够在可视模式下打开和关闭手风琴。

我确实找到了以下脚本来监视何时更改块。唯一的问题是，它会在加载所有内容之前触发，并且我不得不使用超时来允许块完全加载。我一直找不到更好的方法来实现这一目标。有什么建议吗？

const getBlockList = () => wp.data.select( 'core/editor' ).getBlocks();
let blockList = getBlockList();
wp.data.subscribe(() => {
    const newBlockList = getBlockList();
    const blockListChanged = newBlockList !== blockList;
    blockList = newBlockList;
    if ( blockListChanged ) {
        setTimeout(function(){
            jQuery(document).foundation();
            Foundation.reInit($('[data-accordion]'));
        }, 4000);
    }
});

Answer 1

在前端，您会像以前一样获得静态html。如果在保存功能中向组件添加了click事件，则在序列化过程中它将被剥离，因此无需费心。一切都像以前一样工作。

但是，在编辑器端，您可以在编辑函数的return元素中的任何元素上添加事件：

这是在es6中的操作方式：

const handleClick = (event) => {
  console.log(event)
}

const element = <div onClick={handleClick}>Click Me</div>;

或在es2015中：

var handleClick = function handleClick(event) {
  console.log(event);
};

var element = React.createElement(
  "div",
  { onClick: handleClick },
  "Click Me"
);

顺便说一句，这是一个gutenber块，而不是react在内存中的表示。

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

Gutenberg块内的Wordpress Add onclick事件

1 个答案: