在 React select 中如何允许用户 select 文本 selected 选项复制其文本

Question

React select 不允许文本 selection selected 选项。我希望用户能够 select selected 选项的文本。每当用户尝试 select selected 选项的文本时，react select 的菜单就会打开（弹出）。

link 用于代码沙箱： https://codesandbox.io/s/bzdhr?module=/example.js

感谢任何帮助，提前致谢。

Answer 1

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

输入组件控制了保持值的 div.. 没有办法 select 那 div.

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

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

Answer 2

发生这种情况是因为 react-select onMouseDown 事件。您可以通过覆盖 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;

在 React select 中如何允许用户 select 文本 selected 选项复制其文本

In react select how to allow user to select text of selected option to copy its text

reactjs

react-select