当值明显不为空时，反应值未定义答案

【问题标题】：react value is undefined when the value is clearly not empty当值明显不为空时，反应值未定义
【发布时间】：2021-10-01 19:52:13
【问题描述】：

<div className="controls">
  <i className="fas fa-play" value='work' onClick={(e) => console.log(e.target.value)}></i>
  <audio loop autoPlay></audio>
</div>

我很笨，为什么这不起作用。

【问题讨论】：

标签： reactjs

【解决方案1】：

i 元素没有value 属性，它们有textContent 和innerHTML，但没有value。 value 仅适用于表单元素。您在i 上拥有的value 属性是无效属性，不会被属性反映。您可以使用e.target.getAttribute("value")，但value 仍然无效。

有了更多的上下文，我们也许可以给你一个更具体的 React 答案（你可能有一个范围内的变量，其中包含你可以直接使用的值），但是在没有更多上下文的情况下，这里是一个基线答案：

您可以使用data-* attribute 并通过e.target.getAttribute("data-value") 访问该值：

<div className="controls">
  <i className="fas fa-play" data-value='work' onClick={(e) => console.log(e.target.getAttribute("data-value"))}></i>
  <audio loop autoPlay></audio>
</div>

...或dataset (e.target.dataset.value)：

<div className="controls">
  <i className="fas fa-play" data-value='work' onClick={(e) => console.log(e.target.dataset.value)}></i>
  <audio loop autoPlay></audio>
</div>

【讨论】：