值属性未在函数中显示字符串答案

【问题标题】：Value attribute not showing strings in function值属性未在函数中显示字符串
【发布时间】：2019-09-04 18:48:28
【问题描述】：

当在 Material-UI MenuItem 上调用 onClick 并且 value 属性是一个字符串时，事件函数将 value 视为零。

如果我将 value="sometext" 添加到按钮等其他元素，则效果很好。我还是新手，但似乎应该显示字符串值。

我做错了什么？

handleClose(e) {
  console.log(e.currentTarget)
  console.log(e.currentTarget.value)
}

...

return (
  <Menu>
    <MenuItem value={1} onClick={this.handleClose}>One</MenuItem>
    <MenuItem value='A' onClick={this.handleClose}>Two</MenuItem>
  </Menu>
);

在本例中，如果单击第一个菜单项，控制台输出如预期的那样：

<li ... value="1">...</li>
1

但我期待第二个菜单项是“A”，但它返回：

<li ... value="A">...<li>
0

我尝试使用字符串变量，使用 target 而不是 currentTarget。我可以使用 id="A" 而不是 value 属性，这很有效，但我想了解为什么会这样。

【问题讨论】：

你想用这个值做什么？
我正在学习 JavaScript + React。因此测试各种传递值的方式。这只是一个奇怪的案例，似乎没有任何意义。我的教程将 value="something" 列为传递数据的一种方式。
是的，prop="value" 语法是传递字符串作为 prop 值的有效方式。我建议你找一个不同的道具或不同的组件来测试它，因为MenuItem 的value 道具必须是一个数字，而且无论如何都没有用。例如TextField 有一个label 属性，它允许一个字符串并且更有意义地查看结果。

标签： reactjs material-ui

【解决方案1】：

li 值属性必须是数字。
0可能是默认值，所以当你设置为'A'时，它会得到默认值。

顺便说一句：

根据li docs，li值属性在无序列表中没有意义（material-ui Menu在底层使用了

价值

这个整数属性表示列表的当前序数值由元素定义的项目。唯一允许的值属性是一个数字，即使列表显示为 Roman 数字或字母。列出此项目之后的项目继续从值集编号。 value 属性对无序列表 () 或用于菜单 ()。

【讨论】：

我从没想过要查看 li 文档。谢谢。
@chris358 请注意，docuementation for MenuItem 无论如何都不会将value 列为可接受的道具。这是一个你不应该使用它的线索。