reactjs 单击 accordion 中的自动完成MUI组件时停止传播

vltsax25  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(114)

我想在AccordionSummary中添加一个Autocomplete组件,但当我单击它时, accordion 展开并具有focus状态。
我试着阻止传播,但它不工作。
如何停止传播,使 accordion 不展开,也不具有焦点状态?
下面是一个可复制的例子:https://codesandbox.io/s/damp-cdn-k46ut6?file=/src/App.tsx:333-349
谢谢你,谢谢

nc1teljy

nc1teljy1#

更新(10-16-23)

Input组件的focus事件冒泡,导致它为AccordionSummary组件触发。在Input处停止传播就成功了。参见更新的codesandbox

原件

要停止mui Autocomplete组件上的传播,您需要在呈现的Input和Listbox组件中覆盖onClick事件。

<Autocomplete
  ListboxProps={{ onClick: (e) => e.stopPropagation() }}
  renderInput={(props) => 
    <TextField 
      {...props} 
      InputProps={{ 
        ...props.InputProps 
        onClick: (e) => e.stopPropagation(),
        onFocus: (e) => e.stopPropagation(), // Added with update
      }} 
    />
  }
/>

有关自动完成API的详细信息,请参阅Autocomplete documentation

相关问题