reactjs - 添加到 Material UI Autocomplete Paper 组件的文本输入在作为选项过滤器键入每个字符后失去焦点

问题描述

我正在覆盖 Material UI Autocomplete 的 Paper 组件以添加自定义搜索。我不希望自动完成的主要文本区域成为搜索，因为我将根据用户选择在那里构建一个特殊的字符串。您可以在 V 形下方的图像中看到，用户可以根据关系向上遍历对象。

因此，我的包含自定义搜索的自定义 Paper 编码如下：

PaperComponent={({children, ...other}) => {
        return (
            <Paper {...other}>
                <ClickAwayListener onClickAway={closeOptionsList}>
                    <div key="click-away-wrapper">
                        <Input
                            styleInput={{width: '100%'}}
                            value={customFilterString}
                            onChange={handleCustomFilterChange}
                            className="slds-m-horizontal_small slds-m-top_small"
                            iconRight={<InputIcon name="search" category="utility" />}
                        />
                        {children}
                    </div>
                </ClickAwayListener>
            </Paper>
        )}}

作为用户类型，我过滤可用选项并更改自动完成的选项（使用挂钩）。

问题：输入每个字符后，自定义搜索过滤器失去焦点......所以我必须点击每个我想输入的字母。我尝试了一些我在网上找到的建议，例如：向输入添加唯一键，将输入声明移出主组件，使其不会被重新渲染，设置自动对焦等......实际上没有什么可以解决这个问题。当我尝试将选项列表更新为适当的选项时，它总是在每个字符之后失去焦点。

我几乎不知道如何阻止这种情况并允许用户继续输入他们内心的内容以进行过滤。希望对 react/material ui 更了解的人可能会提出一些建议。或者也许有比自动完成的论文更好的地方来放置搜索？

在此先感谢您的任何建议！

标签： reactjsreact-hooksmaterial-ui

我处于几乎完全相同的情况，碰巧遇到了一个相关问题的答案，导致我找到了解决方案：https ://stackoverflow.com/a/59578104/8070411

问题似乎是将元素而不是组件返回给PaperComponent道具。

像这样的东西对我有用：

PaperComponent={(paperProps) => (
    <CustomPaperComponent
        {...paperProps}
        customFilterString={customFilterString}
        onClickAway={closeOptionsList}
        onInputChange={handleCustomFilterChange}
    />
)}

...

const CustomPaperComponent = (props) => {  
  return (
    <Paper {...other}>
        <ClickAwayListener onClickAway={props.onClickAway}>
            <div key="click-away-wrapper">
                <Input
                    styleInput={{width: '100%'}}
                    value={props.customFilterString}
                    onChange={props.onInputChange}
                    className="slds-m-horizontal_small slds-m-top_small"
                    iconRight={<InputIcon name="search" category="utility" />}
                />
                {props.children}
            </div>
        </ClickAwayListener>
    </Paper>
  );
};

值得注意的是，我也尝试从匿名函数中更改它，但没有奏效。它必须是一个组件。

不工作：

const renderCustomPaper = (paperProps) => {
    const {children, ...other} = paperProps;
    reutrn (
        <Paper {...other}>
            <ClickAwayListener onClickAway={closeOptionsList}>
                <div key="click-away-wrapper">
                    <Input
                        styleInput={{width: '100%'}}
                        value={customFilterString}
                        onChange={handleCustomFilterChange}
                        className="slds-m-horizontal_small slds-m-top_small"
                        iconRight={<InputIcon name="search" category="utility" />}
                    />
                    {children}
                </div>
            </ClickAwayListener>
        </Paper>
    );
}

...

PaperComponent={renderCustomPaper}

reactjs - 添加到 Material UI Autocomplete Paper 组件的文本输入在作为选项过滤器键入每个字符后失去焦点

问题描述

解决方案

推荐阅读