将 onPaste 与 react-select 结合使用

Question

我正在尝试 onPaste 使用 react-select。似乎无法利用该事件。

基本上我只是在 <Select/> 中这样做：onPaste={(e) => this.doPasteMagic(e)}

但它从未被解雇。我是不是遗漏了什么或者是否有其他方法来区分键入和粘贴？

我看到了一些关于使用 onChange 的建议，但这对我来说也很麻烦。

Answer 1

我经常摆弄那个。我发现这不是 react-select 的主要特性之一，这让我感到相当惊讶。无论如何，我找到了解决方法：

<div style={{height: '100%', width: '100%' }} onPaste={(e) => console.log(e)}>
    <Select .../>
</div>

这似乎可以解决问题并在正确的时间触发正确的事件。

Answer 2

您可以创建自定义输入字段并为其附加 onPaste 事件处理程序。

import { components } from 'react-select'
const CustomInput = props => (
  <components.Input
    {...props}
    onPaste={myOnPasteHandler} />
)

然后通过 'components' 属性将其传递给 Select：

import Select from 'react-select'
import CustomInput from './CustomInput'
const MySelectComponent = props => (
  <Select 
    // ...
    components={{ Input: CustomInput }} />
)

将 onPaste 与 react-select 结合使用

Using onPaste with react-select

reactjs

react-select