javascript - 为什么以下分配会删除 "width and height"属性？

Question

我有一个对象数组:

elements: [
    {
      id: '1',
      dataX: 0,
      dataY: 0
    },
    {
      id: '2',
      dataX: 189,
      dataY: 189
    }
  ]

它们在模板中是这样使用的:

// This is inside a repeat loop:
<a class="btn"
  id="{{ id }}"
  data-x="{{ dataX }}"
  data-y="{{ dataY }}"
  style="transform: translate({{ dataX }}px, {{ dataY}}px);">
</a>

最终输出:

<a class="btn" id="2" data-x="189" data-y="189" style="transform: translate(189px, 189px); width: 144px; height: 36px;"></a>

我有代码可以更改 data-x 和 data-y 的值以及 transform 属性，因此 anchor 标记可以是拖。

在该函数的末尾，我有几行更改数组 elements 本身:

const target = event.target
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

// the code that makes the anchor tags move

// the code that modifies the array itself
 this.elements.map(item => {
   if (item.id === target.id) {
      item.dataX = x
      item.dataY = y
    }
 })

它有效。然而，width 和 height 属性被抹掉了:

<a class="btn" id="2" data-x="189" data-y="189" style="transform: translate(189px, 189px);"></a>

这是为什么以及如何预防？

注意:this.elements 是一个 react 元素。这意味着如果它的数据发生变化，该元素将在模板中重新呈现。

编辑(完整的 JavaScript 代码。我正在使用 Interact.js ):

 ready () {
    interact('#plane > *')
      .draggable({
        snap: {
          targets: [
            interact.createSnapGrid({ x: this.baseUnit, y: this.baseUnit })
          ],
          range: Infinity,
          relativePoints: [ { x: 0, y: 0 } ]
        },
        restrict: {
          restriction: 'parent',
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        onmove: (event) => {
          const target = event.target
          const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
          const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

          // translate the element
          target.style.webkitTransform =
          target.style.transform =
            'translate(' + x + 'px, ' + y + 'px)'

          // update the positon attributes
          target.setAttribute('data-x', x)
          target.setAttribute('data-y', y)

          this.elements.map(item => {
            if (item.id === target.id) {
              console.log(item)
              item.dataX = x
              item.dataY = y
            }
          })
        }
      })
      .resizable({
        snap: {
          targets: [
            interact.createSnapGrid({ x: this.baseUnit, y: this.baseUnit })
          ],
          range: Infinity,
          relativePoints: [ { x: 0, y: 0 } ]
        },
        edges: { left: true, right: true, bottom: true, top: true },
        onmove: (event) => {
          const target = event.target
          let x = (parseFloat(target.getAttribute('data-x')) || 0)
          let y = (parseFloat(target.getAttribute('data-y')) || 0)

          // update the element's style
          target.style.width = event.rect.width + 'px'
          target.style.height = event.rect.height + 'px'

          // translate when resizing from top or left edges
          x += event.deltaRect.left
          y += event.deltaRect.top

          target.setAttribute('data-width', event.rect.width)
          target.setAttribute('data-height', event.rect.height)

          target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height)
        }
      })
  },

Answer 1

这是我对一些缺失部分发生的情况的疯狂猜测......

您可能有某种绑定(bind)设置，以便当数组发生变化时(由 map 调用改变)它会重新呈现模板；我假设是这样。

原始模板(调用 map 之前)在 style 属性中包含 width 和 height 值，但是不清楚这些是从哪里来的。 清楚的是，它们不包含在您的重新计算中。

因此，我的猜测是它们被 map 调用覆盖了，因为它重写了 entire style 属性，只有 转换。

将 width 和 height 值添加回 style 属性的动态呈现值，这样就没问题了。

编辑:随着完整代码的发布，基本上我所说的一切都是真实的，除了添加了竞争性onmove 事件。 (我相信)

我认为正在发生的是您的第一个 onmove 事件正在触发并设置 width 和 height 以及 then 第二个触发并用 transform 覆盖 style。解决这个问题只需稍微改变一下逻辑，这样您的事件处理程序就不会互相争斗。