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

【问题标题】：Material UI : React Autocomplete component (controlled) and disableCloseOnSelectMaterial UI：React Autocomplete 组件（受控）和 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。
你找到解决办法了吗？

标签： reactjs autocomplete material-ui

【解决方案1】：

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

它还具有性能优势。

【讨论】：

不要让你的答案依赖于外部信息。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
您好，感谢您的评论。这是我做的一个沙箱来演示效果。答案的关键部分就在那里：母组件重新加载，下拉列表显然呈现为关闭状态。