React中e.target.content输出undefined问题求助

• 问题核心：HTML的<button>元素没有原生的content属性，你手动添加的这个自定义属性不会被DOM元素识别为标准属性，所以e.target.content会返回undefined；而name是button的原生属性，因此可以正常读取。

方案1：使用自定义data属性（推荐） #

按照HTML规范，自定义属性需以data-开头，通过dataset对象即可读取对应值：

修改按钮代码：

<button
   onClick={handleDelete}
   value={q.id}
   name={q.name}
   data-content={q.content}
>

修改处理函数：

function handleDelete(e) {
  e.preventDefault();
  setDeleteItem(e.target.value);
  setConfirmModal(true);
  setDeleteContent(e.target.dataset.content);
  setDeleteName(e.target.name);
  console.log(e.target.dataset.content);
}

方案2：直接在点击事件中传递参数 #

跳过事件对象，直接把需要的参数传入处理函数，代码逻辑更直观：

修改按钮代码：

<button
   onClick={() => handleDelete(q.id, q.name, q.content)}
   value={q.id}
   name={q.name}
>

修改处理函数：

function handleDelete(id, name, content) {
  setDeleteItem(id);
  setConfirmModal(true);
  setDeleteContent(content);
  setDeleteName(name);
  console.log(content);
}

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