在 react 中选择如何允许用户选择所选选项的文本以复制其文本

Question

React select 不允许选择所选选项的文本。我希望用户能够选择所选选项的文本。每当用户尝试选择所选选项的文本时，反应选择的菜单都会打开(弹出(。

代码沙箱链接： https://codesandbox.io/s/bzdhr?module=/example.js

任何帮助表示赞赏，提前感谢。

Answer 1

react-select不允许我们选择文本.. 无论是在选项中还是在选定的值中。

输入组件控制了保留值的div.. 无法选择该div。

但是..我设法为你找到了一个解决方法..这应该可以..

https://codesandbox.io/s/react-codesandboxer-example-5jhzf

Answer 2

这是因为react-selectonMouseDown 事件。 您可以通过覆盖react-select自定义渲染器，将单值渲染器包装在不传播 onMouseDown 事件的div 中来更好地处理它。

import React from 'react';
import Select, { Props, components, SingleValueProps } from 'react-select';

const SingleValueRenderer: React.FC<SingleValueProps<any>> = ({ children, ...props }) => (
<div
onMouseDown={(event) => {
event.stopPropagation();
}}>
<components.SingleValue {...props}>{children}</components.SingleValue>
</div>
);
const Dropdown: React.FC<Props> = (props) => (
<Select
components={{ SingleValue: SingleValueRenderer }}
{...props}
/>
);

export default Dropdown;