【问题标题】: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】:

    您只需分散参数即可。参数包括 InputLabelPropsInputProps,因此您必须将它们与其他参数分开,然后将 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

    【讨论】:

      猜你喜欢
      • 2020-03-31
      • 2020-04-03
      • 2021-04-03
      • 2021-10-02
      • 1970-01-01
      • 2021-05-19
      • 2021-03-04
      • 2017-09-23
      • 2020-04-24
      相关资源
      最近更新 更多