Material UI 在下拉列表中自动完成结果文本

Question

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

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

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

例子

用户搜索 "My":

结果：

[someValue]

我想要的：

[My Text]

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

material-ui/AutoComplete/AutoComplete.js [Lines 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
                })
              });

它按我的需要工作。

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

最佳马特

Answer 1

所以，基本上这就是每个属性:

的意思

text: 属性一旦你select其中一个选项，它就会显示在输入中。

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

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

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

希望能帮到你。

Material UI 在下拉列表中自动完成结果文本

Material UI Autcomplete Result Text in Dropdown

javascript

node.js

material-ui