如何将 Material UI 的自动完成组件与 InputBase 一起使用？

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

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

如何将 Material UI 的自动完成组件与 InputBase 一起使用？

How do I use Autocomplete component of Material UI with InputBase?

reactjs

material-ui

googleplacesautocomplete