当前位置：文江博客话题详情

在MUI自动完成中如何在选择选项后如何调用功能（不是同时）

发布于 2025-01-27 04:39:16 字数 289 浏览 3 评论 0原文

执行后：

单击自动完成输入
在选项之间使用arrow按键
通过按enter键选择选项，

我想通过按下来调用功能再次输入键，但我找不到如何做。

我尝试使用onkeydown autocomplete的输入，但通过在按下enter上选择一个值，它也调用了该功能。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南笙 2025-02-03 04:39:16

我找到了这个。 onChange具有以下props：

（事件：任何，值：字符串，原因：autocompleteinputchangeasean），一旦选择了建议原因>原因>原因具有值重置


(event: any, value: string, reason: AutocompleteInputChangeReason) => {

 

if (reason === "reset") {

     ...
}

I found this. onChange has following props:

(event: any, value: string, reason: AutocompleteInputChangeReason) and once suggestion is selected reason has value reset


(event: any, value: string, reason: AutocompleteInputChangeReason) => {

 

if (reason === "reset") {

     ...
}

回复收藏 0 原文

我也只是我 2025-02-03 04:39:16

您可以在MUI自动完成中使用Onchange Prop。喜欢：-

<Autocomplete
      disablePortal
      id="combo-box-demo"
      options={[]}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      onChange={()=>console.log("changed")}
    />

You can use onChange prop in MUI Autocomplete. like:-

<Autocomplete
      disablePortal
      id="combo-box-demo"
      options={[]}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      onChange={()=>console.log("changed")}
    />

回复收藏 0 原文

贪恋 2025-02-03 04:39:16

我找到了要实现的此功能的解决方法：

我保留iSopen autocomplete的状态，并使用 oncoce> onclose 和onopen < /code>要更改等法的事件并在输入中按密钥时，我检查键代码是否是Enter和iSopen IS false然后我调用我想要的方法：


const [isOpen, setIsOpen] = useState(false);
...

<Autocomplete
      renderInput={(params) => <TextField onKeyDown={(e)=> { 
          if(e.key === 'Enter' && !isOpen) filter()
        } />
      }
      onOpen={()=>setIsOpen(true)}
      onClose={()=>setIsOpen(false)}
    />

I found a workaround for this feature I want to implement:

I keep an isOpen state for the Autocomplete and use onClose and onOpen events to change isOpen and on pressing keys in the input I check if the key code is Enter and isOpen is false then I call the method I want:


const [isOpen, setIsOpen] = useState(false);
...

<Autocomplete
      renderInput={(params) => <TextField onKeyDown={(e)=> { 
          if(e.key === 'Enter' && !isOpen) filter()
        } />
      }
      onOpen={()=>setIsOpen(true)}
      onClose={()=>setIsOpen(false)}
    />

回复收藏 0 原文

~没有更多了~