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

c3frrgcw  于 2022-12-24  发布在  TypeScript
关注(0)|答案(1)|浏览(99)

我有一个autocomplete组件,用于呈现标记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()} />;
    };
fafcakar

fafcakar1#

问题是因为标记呈现在startAdornment内部,当您将startAdornment设置为等于图标时,它会删除标记。
因此,您可以使用空htmlTag<>)设置startAdornment,并在其中呈现相关组件以及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()} />;
    };

相关问题