如何在 InputBase 中使用 Material UI 的自动完成组件？

Question

params 对象似乎不适用于 InputBase。我也试过 ref={params.inputProps}。我正在使用 googleplaces 自动完成功能

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

Answer 1

你只需要展开参数。参数包括InputLabelPropsand 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