材质UI自动完成自定义renderInput

时间:2020-05-30 23:51:20

标签: reactjs autocomplete material-ui

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

问题是,选项从不显示。我在这里创建了一个演示(将renderInputrenderInputWORKING交换以查看工作版本):

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 />组件?

1 个答案:

答案 0 :(得分:3)

更新

Material-UI的4.10.1版本(于2020年6月1日发布)在此确切情况的文档中包含了一个新示例:https://material-ui.com/components/autocomplete/#custom-input

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


文档中最有用的示例是Customized Autocomplete example,它使用InputBase而不是TextField。此示例包含用于renderInput的以下代码:

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

传递给InputProps的{​​{1}}放在包裹TextField的div上,因此大多数道具都不适合直接放在<input>元素上,因为你之前是。在上述文档示例的代码中,您可以看到它仅使用<input>中的一件事,即params.InputProps。该引用是used for controlling the anchor element的选项列表框。 ref也是placed on the <input> itself,但是ref用于不同的目的。在您的代码中,只有其中一个引用被使用。

下面是一个有效的示例(基于Combo Box example,因为您的沙箱还有许多其他与此问题不直接相关的自定义内容),它使用ref而不是<input>

TextField

Edit Autocomplete using input instead of TextField