Question

我有一个自动完成组件，可呈现标签 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()} />;
    };

Answer 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()} />;
    };

自动完成-在自动完成组件中的文本字段中添加左图标

1 个答案: