材质 ui 中带有自定义输入的下拉菜单答案

【问题标题】：Dropdown with custom input in material ui材质 ui 中带有自定义输入的下拉菜单
【发布时间】：2016-01-04 12:22:44
【问题描述】：

是否可以有一个下拉字段，但能够添加下拉列表建议的值以外的值？

类似于autocomplete 字段，showAllItems 设置为 true 且没有自动完成功能

编辑：

我想要实现的只是提交带有自定义值的表单或从下拉列表中选择用户（根据用户的选择）

【问题讨论】：

您想让用户能够将新项目添加到下拉列表中，还是让用户能够通过自定义输入（而不是从列表中）提交表单？
感谢您的通知 jalooc 我已经编辑了我的问题，我只想接受用户的自定义输入并与我的表单一起提交，谢谢
自动完成组件不能替代下拉菜单，例如，它要求您在打开之前至少输入一个字符，而使用下拉菜单，您可以按向下箭头图标。如果您强制自动完成以打开所有焦点项目，这将不是一个很好的用户体验。您正在寻找的是一个真正的组合框。

标签： reactjs material-ui

【解决方案1】：

使用onNewRequest 属性。根据https://github.com/callemall/material-ui/blob/master/src/auto-complete.jsx：

const AutoComplete = React.createClass({

...

render() {

...

return (
  <div style={mergedRootStyles} onKeyDown={this._handleKeyDown}>
    <div style={{width: '100%',}}>
      <TextField
        {...other}
        ref="searchTextField"
        value={this.state.searchText}
        onEnterKeyDown={() => {
          setTimeout(() => {
            this._close();
          }, this.props.touchTapCloseDelay);
          this.props.onNewRequest(this.state.searchText);
        }}

...

每次用户按下Enter 时都会调用使用此属性传递的函数，因此您只需在该函数内处理提交输入。

【讨论】：

onEnterKeyDown 已被弃用，您可以改用onKeyDown。

【解决方案2】：

使用 mui 自动完成功能，您走在了正确的轨道上。尝试使用freeSolo 选项

https://mui.com/components/autocomplete/#free-solo

【讨论】：