React组件中能否在article标签使用value属性？点击article时如何实现显示标题？

兄弟，先给你理清楚两个核心问题：

1. article标签能不能用value属性？ #

答案是不能——原生HTML里，只有表单类元素（比如<input>、<select>、<textarea>这些）才有value属性，<article>作为块级内容标签，根本不支持这个属性。你强行加上value后，浏览器不会把它当成有效属性处理，所以e.target.value自然拿不到任何值，这就是你当前代码不生效的原因。

2. 怎么实现点击article显示标题的需求？ #

给你推荐几种简单靠谱的实现方式：

方式一：用自定义data属性存储标题 #

把标题存在data-*自定义属性里，点击时通过dataset获取：

import { useState } from 'react';

function ArticleDemo() {
  const [title, setTitle] = useState('');
  
  return (
    <div>
      {/* 用data-title存储标题 */}
      <article data-title="React状态管理实战" onClick={(e) => setTitle(e.target.dataset.title)}>
        点击我查看标题
      </article>
      <p>当前选中标题：{title}</p>
    </div>
  );
}

方式二：直接在点击事件中传入标题 #

如果标题是已知的变量，直接在点击回调里赋值更简单，不用操作DOM：

import { useState } from 'react';

function ArticleDemo() {
  const [title, setTitle] = useState('');
  const myArticleTitle = 'React组件性能优化技巧';
  
  return (
    <div>
      <article onClick={() => setTitle(myArticleTitle)}>
        点击我查看标题
      </article>
      <p>当前选中标题：{title}</p>
    </div>
  );
}

方式三：动态列表场景下的处理 #

如果是从数组渲染的多篇文章，直接把每篇的title作为参数传入点击事件：

import { useState } from 'react';

function ArticleList() {
  const [title, setTitle] = useState('');
  const articles = [
    { id: 1, title: 'React Hooks入门' },
    { id: 2, title: 'Next.js项目搭建' }
  ];
  
  return (
    <div>
      {articles.map(article => (
        <article 
          key={article.id} 
          onClick={() => setTitle(article.title)}
        >
          {article.title}
        </article>
      ))}
      <p>当前选中标题：{title}</p>
    </div>
  );
}

总结一下：别给非表单元素加value属性，用上面的方法就能轻松实现点击显示标题的效果啦～

备注：内容来源于stack exchange，提问作者Tyne