Question

使用 React，我试图访问我的 <div> 标签的值。所以，我把价值放在 <div> 中，就像 <div value></div> 然后，我做了一个 onClick 事件来标记，就像<div value={5} onClick={(x)=> console.log(x.target)}></div>

我可以在控制台中看到 <div value={5}></div>。

所以，我把 x.taget.value 就像， <div value={5} onClick={(x)=> console.log(x.target.value)}></div>

我希望控制台中有 5 个但是，我不想它显示未定义...

我不知道我做错了什么

<span>
        {[...Array(total).keys()]
          .slice(`${number}`, `${number + 3}`)
          .map((e) => (
            <div
              key={e + 1}
              value={e + 1}
              onClick={(x) => console.log(x.target.value)}
            >
              {e + 1}
            </div>
          ))}
</span>

Answer 1

value 不是 div 的有效属性。它适用于input。您可以使用 id 之类的属性，甚至可以使用以 data- 开头的自定义属性。

//Using ID
          <div
              key={e + 1}
              id={e + 1}
              onClick={(x) => console.log(x.target.id)}
            >

//Using data attribute
          <div
              key={e + 1}
              data-value={e + 1}
              onClick={(x) => console.log(x.target.getAttribute('data-value'))}
            >

Answer 2

您尝试做的实际上是获取可用于表单/输入元素的 value 属性。你需要使用的是 x.target.getAttribute("value") 对于一个 div 来说，value 只是一个属性，没有特殊意义。

这是一个sample codesandbox

我如何在反应中访问 <div value={} /> 中的 div 标签值？

2 个答案: