下拉菜单中的 Material UI 自动完成结果文本答案

【问题标题】：Material UI Autcomplete Result Text in Dropdown下拉菜单中的 Material UI 自动完成结果文本
【发布时间】：2016-09-14 03:12:12
【问题描述】：

我正在使用 Material UI 的自动完成组件，但遇到了显示值而不是文本元素的问题。我使用以下格式作为我的数据源：

[{value: 'someValue', text: 'My Text'}, {value: 'someOtherValue', text: 'Some other Text'}]

当用户输入查询时，它会正确找到匹配的结果，但下拉菜单本身会显示值而不是文本。

示例

用户搜索“我的”：

结果：

[someValue]

我想要什么：

[My Text]

它现在的工作方式对我来说实际上似乎违反直觉。

material-ui/AutoComplete/AutoComplete.js [第 346-354 行]

当我更改组件的源代码时：

requestsList.push({
  text: item.text,
  value: _react2.default.createElement(_MenuItem2.default, {
                  innerDivStyle: styles.innerDiv,
                  primaryText: item.value,
                  disableFocusRipple: disableFocusRipple,
                  key: index
                })
              });

到

requestsList.push({
  text: item.text,
  value: _react2.default.createElement(_MenuItem2.default, {
                  innerDivStyle: styles.innerDiv,
                  primaryText: item.text,
                  disableFocusRipple: disableFocusRipple,
                  key: index
                })
              });

它可以按我的需要工作。

我找不到任何关于此的未解决问题。我只是做错了吗？

最好的马特

【问题讨论】：

这就是它的工作方式.. 你为什么不把你的数据源映射到一个“有效的”呢？示例{value: 'My Text', text: 'My Text', internalValue: 'someValue'}
是的，我可以这样做 - 但我想知道什么是“价值”和“文本”，因为我只是给它们相同的价值。我可以简单地使用一个简单的数组：['My Text1', 'My Text2']。您能给我一个正确使用 {value & text} 的示例/用例吗？

标签： javascript node.js material-ui

【解决方案1】：

所以，基本上每个属性的含义是这样的：

文本：选择其中一个选项后将在输入中显示的属性。

value 将为 popover 内的每个选项显示的属性。可以是text或node。

我同意您在文档中缺少对这些属性的解释，但我们可以看到它们在示例中被使用，主要是在第二部分（数据源）中。欢迎 PR..

它们在那里有 2 个不同的属性，因为很多时候用户需要显示不同的值，并且大多数（如果不是全部）库都支持它。可能有一个 default 属性可以满足这两种需求，以防其中一个没有价值但到目前为止还没有，如果你想要或创建一个 PR，你甚至可以建议它。

希望我能帮上忙。

【讨论】：

很好的解释。感谢您的澄清！