Material UI：React Autocomplete 组件（受控）和 disableCloseOnSelect

Posted 2023-02-22

【中文标题】Material UI：React Autocomplete 组件（受控）和 disableCloseOnSelect

【英文标题】：Material UI : React Autocomplete component (controlled) and disableCloseOnSelect

【发布时间】：2020-08-31 08:43:30

【问题描述】：

我在使用 Material UI 为 React.js 提供的 Autocomplete component 时遇到问题。

这是我的组件的样子：

<Autocomplete
        options=options
        value=value
        disableCloseOnSelect
        onChange=handleChange
        limitTags=4
        getOptionLabel=(option) => option.name 
        renderOption=(option,  selected ) => (
          <React.Fragment>
            <Checkbox
              icon=icon
              checkedIcon=checkedIcon
              className=classes.checkbox
              checked=selected
            />
            option.name
          </React.Fragment>
        )
        renderInput=(params) => (
          <TextField ...params  variant="outlined" label=label placeholder=label />
        )
        ...custom
      />

我无法让功能 disableCloseOnSelect 与受控组件一起运行，因为它不会阻止列表在选择后关闭...如果我删除道具 value 和 onChange 一切正常，但我的项目需要它们。

有没有人有同样的问题或发现我处理事情的方式有什么问题？

有一个问题似乎与我的here 相符。那样的话，会不会是bug？

【问题讨论】：

你能创建一个活生生的例子来说明这一点吗？例如，您可以使用codesandbox.io。

你找到解决办法了吗？

【参考方案1】：

这很可能是由于母组件重新渲染造成的。自动完成的状态需要本地化。 这是一个沙盒演示，说明了这带来的不同： https://codesandbox.io/s/priceless-wilson-zz59q?file=/src/App.js

它还具有性能优势。

【讨论】：

不要让你的答案依赖于外部信息。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

您好，感谢您的评论。这是我做的一个沙箱来演示效果。答案的关键部分就在那里：母组件重新加载，下拉列表显然呈现为关闭状态。