Javascript 在单击事件中检索div的value属性

我的目标是获取div的value和id属性。id正在工作，但我还无法获取值。我尝试了

event.target.value

，但它仍然返回未定义。我应该单独传递属性还是将其附加到

事件

//钩子
const{useState}=React；
常量选项=[
{id:0，值：'00:00'，显示：'Midnight'，句点：null}，
{id:1，值：'00:30'，显示：'12:30'，句点：'AM'}，
{id:2，值：'01:00'，显示：'1:00'，句点：'AM'}，
{id:3，值：'01:30'，显示：'1:30'，句点：'AM'}，
{id:4，值：'02:00'，显示：'2:00'，句点：'AM'}，
{id:5，值：'02:30'，显示：'2:30'，句点：'AM'}，
{id:6，值：'03:00'，显示：'3:00'，句点：'AM'}，
{id:7，值：'03:30'，显示：'3:30'，句点：'AM'}，
{id:8，值：'04:00'，显示：'4:00'，句点：'AM'}，
{id:9，值：'04:30'，显示：'4:30'，句点：'AM'}，
{id:10，值：'05:00'，显示：'5:00'，句点：'AM'}，
{id:11，值：'05:30'，显示：'5:30'，句点：'AM'}，
{id:12，值：'06:00'，显示：'6:30'，句点：'AM'}，
]
功能时间输入（道具）{
函数handleClick（事件、值）{
console.log（event.target.value）
onClick（Number（event.target.id）、value）；
};
const timeMarkup=OPTIONS.map（option=>
handleClick（e，value）}
>
{option.display}{option.period}
);
返回(
{timeMarkup}
);
};
函数App（）{
const[selectedId，setSelectedId]=useState（“”）；
const[value，setValue]=使用状态（“”）；
函数handleClick（id，值）{
setSelectedId（id）；
设置值（值）
}
返回(
Id:{selectedId}值：{Value}

);
};
//渲染
ReactDOM.render(
,
document.getElementById（“react”）
);
.time容器{
显示器：flex；
溢出-x：自动；
溢出y：隐藏；
利润率：10px 0 10px 0；
}
.按钮{
光标：指针；
背景色：#66bb6a；
边界半径：25px；
边距：02px0；
文本对齐：居中；
颜色：白色；
字号：600；
高度：20px；
填充：3倍；
空白：nowrap；
}
.按钮：悬停{
背景色：#8ce291；
颜色：黑色；
}
.选定{
指针事件：无；
背景色：#002e03；
}
将单击事件更改为：

onClick={(e, value) => handleClick(e, option.value)}

div没有value属性。您可能可以使用getAttribute检索它，但有一个更简单的解决方案。将
value={option.value}onClick={（e，value）=>handleClick（e，value）}
更改为
onClick={（e）=>handleClick（e，option.value）}

另一方面，由于可访问性的原因，您不应该制作可单击的div。您应该使用样式化按钮或锚定标记。至少将aria属性role=“button”添加到div中。
谢谢，我没想到会这样传递它。谢谢你提供的额外信息；我会做出这些改变。