Javascript 下拉列表中的材料UI和完整结果文本

我正在使用MaterialUI的Autocomplete组件，并且面临一个问题，即显示的是值而不是文本元素。我使用以下格式作为数据源：

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

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

示例

用户搜索“我的”：

结果:

[someValue]

我想要的是：

[My Text]

事实上，它现在的工作方式似乎违反了我的直觉

物料界面/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
                })
              });

到

它能按我的需要工作

我找不到与此相关的任何公开问题。我只是做错了吗

最好的

---

Matt

因此，基本上这就是每个属性的含义：

文本：属性，一旦选择其中一个选项，该属性将显示在输入中

值将为popover内的每个选项显示的属性。它可以是

文本

或

节点

我同意您在文档中没有对这些属性进行解释，但是我们可以在示例中看到它们的使用，主要是在第二部分（数据源）中。欢迎公关

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

---

希望我能帮上忙。

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

文本：属性，一旦选择其中一个选项，该属性将显示在输入中

值将为popover内的每个选项显示的属性。它可以是

文本

或

节点

我同意您在文档中没有对这些属性进行解释，但是我们可以在示例中看到它们的使用，主要是在第二部分（数据源）中。欢迎公关

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

---

希望我能帮上忙。

就是这样。。为什么不把你的数据源映射成一个“有效的”数据源呢？示例

{value:'我的文本'，Text:'我的文本'，internalValue:'someValue'}

是的，我可以这样做-但我想知道'value'和'Text'的用途是什么，因为我只是简单地给它们相同的值。我可以简单地使用一个简单的数组：['mytext1'，'mytext2']。你能给我一个正确使用{value&text}的例子/用例吗？这就是它的工作方式。。为什么不把你的数据源映射成一个“有效的”数据源呢？示例

{value:'我的文本'，Text:'我的文本'，internalValue:'someValue'}

是的，我可以这样做-但我想知道'value'和'Text'的用途是什么，因为我只是简单地给它们相同的值。我可以简单地使用一个简单的数组：['mytext1'，'mytext2']。你能给我一个正确使用{value&text}的例子/用例吗？很好的解释。谢谢澄清！很好的解释。谢谢澄清！

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