如何获取从downshift useSelect项目更改触发的实际事件

huangapple go评论144阅读模式
英文:

How to acquire actual event triggered from downshift useSelect item change

问题

I can provide the translation for the content you've provided:

我正在使用由downshift提供的useSelect钩子。

我遇到了一种情况,我无法更改传递给useSelectitems

每个菜单项都有一个处理程序,该处理程序期望事件作为参数,但我看不到如何访问用户触发的实际事件的方法。

典型的菜单项如下所示

menuItems: [{
  label: 'foo',
  value: 'bar',
  onClick: (event) => doTheThing(event),
}]

在以前的情况下,我曾经利用onSelectItemChange处理程序来获取所选项目

const { getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex, isOpen } = useSelect({
  items: menuItems,
  onSelectedItemChange: ({ selectedItem }) => {
    // 调用项目的事件处理程序
    selectedItem.onClick(<这里是我需要实际事件对象的地方>);
  }
});

但传递给onSelectedItemChange的参数不包括触发所选项目更改的实际事件。

我已经在downshift repo中搜索了一个返回事件的函数,但没有找到任何突出的内容。

也许有另一种策略我可以使用来获取事件吗?

英文:

I'm using the useSelect hook provided by downshift.

I have a situation where I'm unable to change the items passed into useSelect.

Each menuItem has a handler that expects the event as a parameter, but I don't see a way to get access to the actual event triggered by the user.

A typical menu item looks like this

menuItems: [{
  label: &#39;foo&#39;,
  value: &#39;bar&#39;,
  onClick: (event) =&gt; doTheThing(event),
}]

In previous cases I've leveraged the onSelectItemChange handler to obtain the selected item

const { getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex, isOpen } = useSelect({
  items: menuItems,
  onSelectedItemChange: ({ selectedItem }) =&gt; {
    // call the item&#39;s event handler
    selectedItem.onClick(&lt;here&#39;s where I need the actual event object&gt;);
  }
});

but the arguments passed to onSelectedItemChange do not include the actual event that triggered the selected item change.

I've searched through the downshift repo for a function that returns the event, but nothing stands out.

Perhaps there's another strategy I can use to acquire the event?

答案1

得分: 1

这个也让我感到困惑,但在github文档中进行了一些调查后,我发现有一些支持的方法可以将事件对象暴露出来,以便有条件地更改事件行为或完全覆盖它。以下示例有助于澄清您可以展示的不同控制级别:

  1. 将针对目标事件传递自定义处理程序给prop getter,根据文档,您的自定义处理程序将在downshift处理程序之前调用
const items = [...] // 在此处添加项目。
const { getMenuProps } = useSelect({ items })
const ui = (
  /* 按钮,标签,... */
  <ul
    {...getMenuProps({
      onKeyDown: event => {
        // 在此处添加您的自定义keyDown处理程序。
      },
    })}
  />
)
  1. 完全绕过默认的downshift行为,并在prop getter之外调用处理程序
const items = [...] // 在此处添加项目。
const { getMenuProps } = useSelect({ items })
const ui = (
  /* 按钮,标签,... */
  <ul
    {...getMenuProps()}
    onKeyDown={event => {
      // 在此处添加您的自定义keyDown处理程序。
    }}
  />
)

值得注意的是,这将在此处暴露包装的React合成事件,并且您需要再深入一级才能获取到本机事件对象本身。

还有一个带有一些示例的代码沙盒:https://codesandbox.io/s/l2xqz1qyll?file=/index.js

英文:

This confused me as well, but after some digging around in the github documentation I found that that there are a few supported ways to expose the event object to either conditionally alter event behavior or override it entirely. These examples helped clarify the different levels of control you can exhibit:

  1. Pass a custom handler for the targeted event to the prop getter, per the docs your custom handler will be called before the downshift handler

    const items = [...] // items here.
    const {getMenuProps} = useSelect({items})
    const ui = (
    /* button, label, ... */
    &lt;ul
       {...getMenuProps({
            onKeyDown: event =&gt; {
            // your custom keyDown handler here.
          },
       })}
    /&gt;)
    
  2. Bypass the default downshift behavior entirely and call the handler outside of the prop getter

     const items = [...] // items here.
     const {getMenuProps} = useSelect({items})
     const ui = (
       /* button, label, ... */
       &lt;ul
         {...getMenuProps()}
         onKeyDown={event =&gt; {
           // your custom keyDown handler here.
         }}
       /&gt;
     )
    

It's worth noting that this will expose the wrapped React synthetic event here and you will need to reach down one more level to get to the native event object itself.

There is also a code sandbox with some examples: https://codesandbox.io/s/l2xqz1qyll?file=/index.js

答案2

得分: 0

查看文档。
这个语句似乎表示您正在提供选择器。
您不能只是在那里添加一个钩子吗?

为自定义选择组件使用 useSelect。

英文:

Looking at the docs.
This statement seems to indicate you are providing the selector.
Can you not just have a hook in there?

> useSelect for a custom select component.

huangapple
  • 本文由 发表于 2023年6月30日 04:25:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76584401.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定