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

问题描述

params对象似乎不适用于InputBase。我还尝试了ref = {params.inputProps}。我正在使用googleplaces自动填充

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

解决方法

您只需要散布参数即可。这些参数包括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