React/Next.js中点击博客后如何获取slug值？

你当前代码里用e.target.value获取slug会得到undefined，核心原因是<h4>标签本身不存在value属性——这个属性仅针对表单类元素（如input、select）生效。

方法一：直接传递slug作为函数参数 #

这是最直接的实现方式，把post对象的slug直接传给点击函数：

<h4 onClick={() => mainFunction(post.slug)}>{post.title}</h4>  

const mainFunction = (slug) => {
  alert('value is ' + slug);
};

方法二：利用HTML data属性存储slug #

将slug存入标签的自定义data属性，再通过事件对象读取：

<h4 data-slug={post.slug} onClick={mainFunction}>{post.title}</h4>  

const mainFunction = (e) => {
  const slug = e.target.dataset.slug;
  alert('value is ' + slug);
};

补充提示 #

如果<h4>内部嵌套了其他元素（比如<span>），e.target可能会指向子元素而非h4本身，此时可以用e.currentTarget替代——它始终指向绑定事件的那个h4元素：

const mainFunction = (e) => {
  const slug = e.currentTarget.dataset.slug;
  alert('value is ' + slug);
};

内容的提问来源于stack exchange，提问作者Rick