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

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

值不是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只是一个属性，没有特殊意义。

这是一个示例代码沙盒