自动完成 - 将左图标添加到自动完成组件中的文本字段答案

【问题标题】：Autocomplete - Add left icon to text field which is in an autocomplete component自动完成 - 将左图标添加到自动完成组件中的文本字段
【发布时间】：2020-04-05 12:44:35
【问题描述】：

我有一个渲染标签的自动完成组件 Autocomplete with tags

我想渲染一个左图标但只有正确的图标才能正常工作

当前行为

添加左侧图标时，它会显示图标，但不允许在 textField 中呈现标签

预期行为

当添加左图标时，它应该允许在 textField 中呈现标签

重现步骤：

在添加结束图标时起作用：

 const renderInput = (params: Params): ReactNode => {
        if (leftIcon) params.InputProps.endAdornment = <InputAdornment position="end">{leftIcon}</InputAdornment>;

        return <TextField {...params} variant="outlined" placeholder={getPlaceHolderText()} />;
    };

在添加开始图标时不起作用

const renderInput = (params: Params): ReactNode => {
        if (leftIcon) params.InputProps.startAdornment = <InputAdornment position="start">{leftIcon}</InputAdornment>;

        return <TextField {...params} variant="outlined" placeholder={getPlaceHolderText()} />;
    };

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

问题是因为标签是在startAdornment里面渲染的，当您将startAdornment 设置为等于图标时它会删除标签。

因此您可以将startAdornment 设置为空的htmlTag (<>) 并在其中渲染您的相关组件以及startAdornment 的先前内容

例如：它对我有用

const renderInput = (params: Params): ReactNode => {
        if (leftIcon)
            params.InputProps.startAdornment = (
                <>
                    <InputAdornment position="start">{leftIcon}</InputAdornment>
                    {params.InputProps.startAdornment}
                </>
            );

        return <TextField {...params} variant="outlined" placeholder={getPlaceHolderText()} />;
    };

【讨论】：