当连字符在属性中时如何解构 e.target？

Question

我有一个如下所示的输入字段：

<input placeholder="Card Number" name="cc-number" data-stripe="number" class="add-card-form__card-number input" value="">

我想做这样的事情：

onFocus (e) {
  const { 'data-stripe': name, value } = e.target
  // do something with `name` and `value`
}

我知道我可以使用e.target.getAttribute('data-stripe')，但这违背了解构的目的。有什么想法如何做到这一点？

这里它准确地说了我在做什么。如何使用无效变量名的键名来解构对象属性？

Answer 1

data-stripeDOM 元素中没有属性。所有data-XXX属性都转化为dataset属性的特性。所以你应该使用：

onFocus(e) {
    const { dataset: { stripe: name }, value } = e.target;
    // do something with name and value
}

它也可以作为属性的元素进行访问attributes，但由于这是一个数组并且顺序不可预测，因此它对于解构没有用处。