HTML 的 元素不支持 value 属性，直接使用会导致无效 HTML 和运行时逻辑错误；应改用标准的 data-* 自定义属性配合 dataset 或 getAttribute() 获取值。
html 的 `
在 React 组件中，我们常希望通过点击某个语义化容器（如 <article></article>）来触发状态更新，例如获取并显示文章标题。但需注意：<article></article> 是纯语义化 HTML5 元素，它不原生支持 value 属性——该属性仅适用于表单控件（如 <input>、<select></select>、<button></button> 等）。若强行写入 value={title}，虽然 React 不会报错（因它会将未知属性作为 HTML 属性透传），但该属性不会被浏览器识别为有效 DOM 属性，e.target.value 将始终为 undefined，导致 setTitle(e.target.value) 失效。
✅ 正确做法是使用 *HTML5 自定义数据属性（`data-`）**，这是 W3C 规范明确支持的扩展机制：
const [title, setTitle] = useState('React 入门指南');
return (
<article data-title="{title}" onclick="{(e)"> {
// 推荐：通过 dataset 访问（自动驼峰转换）
setTitle(e.currentTarget.dataset.title || '');
// 或等价写法：setTitle(e.currentTarget.getAttribute('data-title') || '');
}}
>
<h2>{title}</h2>
<p>这是一篇关于 React 基础概念的技术文章。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8476" title="react-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179206034644870.jpg" alt="react-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="overflowclass">react-pro</a>
<p class="overflowclass">你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...</p>
</div>
<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</article>
);
⚠️ 注意事项：
-
data-*属性名中的连字符（-）在dataset中会自动转为驼峰命名（如data-article-id→dataset.articleId），因此data-title对应dataset.title； - 务必使用
e.currentTarget而非e.target：防止事件冒泡时点击子元素（如<h2></h2>）导致e.target指向子节点而无dataset.title； - 若逻辑简单且闭包可用（如示例中
title已在作用域内），可直接onClick={() => setTitle(title)}，无需依赖 DOM 属性——更简洁、更可靠； - 避免滥用
data-*存储复杂对象；如需传递结构化数据，建议改用useCallback+ 参数绑定，或提升状态至父组件统一管理。
总结：语义化标签 ≠ 表单控件，切勿将 value 等表单专属属性误用于非表单元素。遵循 HTML 规范，善用 data-* 属性与 dataset API，才能写出健壮、可维护、符合标准的 React 组件。
