5

我一直在到处寻找以弄清楚如何在古腾堡块内添加事件。我正在使用 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);
    }
});
4

1 回答 1

0

在前端，您会像以前一样获得静态 html。如果您在保存功能中将单击事件添加到组件中，它将在序列化过程中被剥离，因此无需在那里出汗。一切都像以前一样工作。

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

这是在 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 -->
于 2019-01-29T00:14:59.030 回答