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

Question

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

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

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

示例

用户搜索“我的”:

结果:

[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

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

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

value 将为弹出窗口内的每个选项显示的属性。它可以是文本或 Node 。

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

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

希望我能帮忙。