如何将 Material UI 的 Autocomplete 组件与 InputBase 一起使用？

【问题标题】：How do I use Autocomplete component of Material UI with InputBase?如何将 Material UI 的 Autocomplete 组件与 InputBase 一起使用？
【发布时间】：2020-10-30 13:17:27
【问题描述】：

params 对象似乎无法与 InputBase 一起使用。我也试过 ref={params.inputProps}。我正在使用 googleplaces 自动完成功能

<Autocomplete
  id="combo-box-demo"
  options={autocomplete}
  style={{ width: 300 }}
                        
  renderInput={(params) => <TextField {...params}  />} // InputBase instead of TextField
 />

【问题讨论】：

标签： reactjs material-ui googleplacesautocomplete

【解决方案1】：

您只需分散参数即可。参数包括 InputLabelProps 和 InputProps，因此您必须将它们与其他参数分开，然后将 InputProps 传播回来。

    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => {
        const {InputLabelProps,InputProps,...rest} = params;
        return <InputBase {...params.InputProps} {...rest}  />}}
    />

工作演示：https://codesandbox.io/s/material-demo-forked-6yhsk?file=/demo.tsx

【讨论】：