javascript - 在 Svelte 中重新渲染布局后执行函数

Question

我想在单击 svelte 中的表格行时创建一个弹出菜单。我使用 document.querySelectorAll 方法将 onclick 事件添加到 onMount 内的每个表行。在 onMount 函数中，我还重新渲染了显示的表格。如何将 onclick 值应用于重新渲染的元素？

onMount(() => {
  console.log(document.querySelectorAll(".results .table table tbody tr"));
  /* -> returns array with only 1 element -> not correct */

  /* ... re-render logic here */
}

但是当我添加超时时:

onMount(() => {
  setTimeout(() => {
      console.log(document.querySelectorAll(".results .table table tbody tr"));
  }, 5000);
  /* -> returns array with all elements */

  /* ... re-render logic here again */
}

可以找到具有完整源代码的 REPL here

Answer 1

我正在写一些想法，但它太长了，无法发表评论。

您在 REPL 中做了相当多的额外工作，Svelte 可以为您做这些工作。我同意 @voscausa 的观点，您应该将事件委托(delegate)给 table 。您几乎不必使用 document.querySelector在斯韦尔特。您将遍历所有行两次。所有附加的事件监听器都应该是标记中的属性，而不是附加在 JS 中，也不附加在初始化函数中(因此将事件委托(delegate)给表)。您不断监视鼠标位置，但仅在 onclick 中使用它，这是 MouseEvent并可以访问 X 和 Y 数据。

将点击监听器切换到容器:

<div class="results" on:click={handleClick}> ... </div>

<script>
  function handleClick(e) {
    const tr = e.target.closest('tr');
    const td = e.target.closest('td');
    if (td) {
      /* code */
    } else {
      /* code */
    }
  }
  </script>

如果您需要它出现在整个文档中，您可以使用 <svelte:window>而不是.results .

更新.option的css div，执行如下操作:

<div class="options" style=`left:${optionsStyle.left}px;top:${optionsStyle.top}px`> ... </div>
<script>
  let optionsStyle = {left: 0, top: 0};

  function handleClick(e) {
    /* code */

    let left = 0, right = 0;
    /* calculate left and right here */
    optionsStyle  = {left: e.clientX, top: e.clientY};

    /* code */
  }
</script>

有关切换类，请参阅 class directive 。一个元素上可以有多个类指令。 (显然，我还没有完成这里的所有逻辑。)

<div class="options" class:expand={optionsExpand}> ... </div>
<script>
  let optionsExpand = false;

  function handleClick(e) {
    const tr = e.target.closest('tr');
    const td = e.target.closest('td');
    if (td) {
      /* code */
      optionsExpand = true;
    } else {
      /* code */
      optionsExpand = false;
    }
  }
</script>

我个人会将选项弹出窗口变成自己的组件并传递 optionsExpand bool 值作为属性。

像我在这里描述的那样做事情会让你以简洁的心态思考，它会简化你的代码，你不需要超时，也不需要 afterUpdates功能。