如何在 React 中从事件对象访问自定义属性
介绍
在本指南中，您将学习如何从 React 中的事件对象访问自定义属性。当您必须使用触发器（例如按钮单击或选项选择）从数据源检索自定义值时，这会很有用。
自定义属性
通常，您需要存储与 DOM 元素相关的信息。这些数据可能对于将数据显示到 DOM 来说没什么用，但对开发人员访问其他数据很有帮助。自定义属性允许您将其他值附加到 HTML 元素上。
自定义属性始终以data-开头。例如：
<ul class="hotels">
<li data-location="Integer pretium" data-id="78" class="hotel-item">
Curabitur
</li>
<li data-location="Sed pharetra" data-id="122" class="hotel-item">
Donec aliquet
</li>
</ul>
这里有两个自定义数据属性：location和id。您可以使用这些属性对酒店进行排序或搜索附近的景点，为用户创造互动体验。
元素可以有任意数量的自定义属性，但只能将值解析为字符串。如果要存储整数值，则必须使用 parseInt ()函数将字符串转换为整数。请注意，数据属性名称不能包含大写字母或特殊字符，如“？”、”&”等。
最好不要使用数据属性来存储已经具有适当属性的值。例如：
<ul data-class="hotels">
<li data-location="Integer pretium" data-id="78" data-class="hotel-item">
Curabitur
</li>
<li data-location="Sed pharetra" data-id="122" data-class="hotel-item">
Donec aliquet
</li>
</ul>
最好不要使用data-class之类的属性来存储类名。它会剥夺您使用 DOM 方法进行类操作的权利，并使元素样式变得很麻烦。
在 React 中的使用
假设您正在开发一个电子商务应用程序，并且有一个<Cart />组件。此组件将用于显示用户购物车中的商品。
class Cart extends Component {
state = { items: [] };
async componentDidMount() {
const items = JSON.parse(localStorage.getItem("cart"));
this.setState({ items });
}
render() {
return (
<div className="cart">
{this.state.items.map(item => (
<div className="cart-item">
<span className="item-name">{item.name}</span>
<button>x</button>
</div>
))}
</div>
);
}
}
要在用户点击x按钮时删除项目，请编写一个点击处理程序函数。但您仍需要弄清楚如何识别要删除的项目。为此，请向包含项目id值的按钮元素添加data-remove属性。
// ...
<div className="cart-item">
<span className="item-name">{item.name}</span>
<button onClick={this.removeItem} data-remove={item.id}>
x
</button>
</div>
// ...
请注意，data-remove是有效的 JSX prop 名称；无需像dataRemove那样使用驼峰式命名。如果您使用驼峰式命名属性名称，JSX 会将其视为 prop 而不是 HTML 自定义属性。
然后，在removeItem()方法中，访问该属性，如下所示。
// ...
removeItem = e => {
const removeId = e.target.dataset.remove;
// logic to remove
const { items } = this.state;
for (let i = items.length - 1; i >= 0; --i) {
if (items[i].id === removeId) items.splice(i, 1);
}
this.setState({ items });
localStorage.setItem("cart", JSON.stringify(items));
};
// ...
事件对象的target属性将为您提供原生 DOM 节点。然后，您可以使用任何 DOM API 来访问属性。数据集属性可能在早期版本的 Internet Explorer 中不可用。在这种情况下，您可以使用getAttribute()方法。
const removeId = e.target.getAttribute("data-remove");
getAttribute ()方法将返回指定属性的字符串值。
或者，您也可以使用getNamedItem()方法访问属性。
const removeId = e.target.attributes.getNamedItem("data-remove").value;
结论
向元素添加自定义属性是将附加数据作为元属性传递的好方法。您可以使用 DOM 方法和对象从应用程序中的任何位置访问它们。
这就是本指南的全部内容。希望您今天学到了一些新东西。探索更多这样的主题将帮助您解决和克服编码中的常见问题。
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~