Material UI 自动完成自定义 renderInput

我正在关注来自的各种例子https://material-ui.com/components/autocomplete/ https://material-ui.com/components/autocomplete/创建自定义自动完成。我正在尝试使用renderInput属性来使用自定义输入组件。我发现的所有示例都使用TextField组件，但我想使用常规input成分。

问题是，选项永远不会显示。我在这里创建了一个演示（交换renderInput with renderInputWORKING查看工作版本）：

https://codesandbox.io/s/epic-johnson-oxy7b?file=/src/App.tsx https://codesandbox.io/s/epic-johnson-oxy7b?file=/src/App.tsx

与以下代码renderInput:

 const renderInput = (params: AutocompleteRenderInputParams) => {
    console.log(params);
    const { InputLabelProps, inputProps, InputProps } = params;
    return (
      <div>
        <label {...InputLabelProps}>foo</label>
        <input {...InputProps} {...inputProps} />
      </div>
    );
  };

我怎样才能使用<input />组件用于renderInput支撑<Autocomplete />?

UPDATE

Material-UI 4.10.1 版本（2020 年 6 月 1 日）在文档中包含了针对这种情况的新示例：https://material-ui.com/components/autocomplete/#custom-input https://material-ui.com/components/autocomplete/#custom-input.

拉取请求：https://github.com/mui-org/material-ui/pull/21257 https://github.com/mui-org/material-ui/pull/21257

文档中最有用的示例是自定义自动完成示例 https://material-ui.com/components/autocomplete/#customized-autocomplete它使用InputBase代替TextField。该示例包含以下代码renderInput:

         renderInput={(params) => (
            <InputBase
              ref={params.InputProps.ref}
              inputProps={params.inputProps}
              autoFocus
              className={classes.inputBase}
            />
          )}

The InputProps传递给TextField放置在包裹的 div 上<input>，所以大部分道具都不适合直接放在<input>像你一样的元素。在上面文档示例的代码中，您可以看到它只使用了其中的一项内容params.InputProps哪一个是ref。这个参考是用于控制锚元素 https://github.com/mui-org/material-ui/blob/v4.10.0/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L421对于选项列表框。参考文献也是放置在<input> itself https://github.com/mui-org/material-ui/blob/v4.10.0/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L936，但是那个ref用于非常不同的目的。在您的代码中，只有其中一个引用被使用。

下面是一个工作示例（基于组合框示例 https://material-ui.com/components/autocomplete/#combo-box因为您的沙箱有很多与此问题不直接相关的其他自定义），使用<input>代替TextField:

import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <div ref={params.InputProps.ref}>
          <label {...params.InputLabelProps}>My Label </label>
          <input {...params.inputProps} autoFocus />
        </div>
      )}
    />
  );
}