当连字符在属性中时如何构造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')，但这会破坏解构的目的。任何想法如何做到这一点？

这里说的正是我正在做的事情。 How to destructure object properties with key names that are invalid variable names?

Answer 1

DOM元素中没有data-stripe属性。所有data-XXX属性都会转换为dataset属性的属性。所以你应该使用：

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

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

Answer 2

这不是连字符问题，您只是没有正确调用HTML DOM。即使您的自定义属性是＆＃34; stuff＆＃34;你不能以e.target.stuff的形式访问它。您自己的链接显示了如何访问连字符：属性。

var {"data-stripe":{value:myVariableName}} = e.target.attributes;
//myVariableName="number"