在反应中选择如何允许用户选择所选选项的文本以复制其文本答案

【问题标题】：In react select how to allow user to select text of selected option to copy its text在反应中选择如何允许用户选择所选选项的文本以复制其文本
【发布时间】：2020-09-11 22:17:08
【问题描述】：

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

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

任何帮助表示赞赏，在此先感谢。

【问题讨论】：

这能回答你的问题吗？ How to select all text in input with Reactjs, when it focused?
@PraveenKumarPurushothaman No
分享一些代码参考
@PraveenKumarPurushothaman.. 他在谈论react-select 库。
@BarunPatro 知道了。

标签： reactjs react-select

【解决方案1】：

react-select 不允许我们选择文本.. 既不是在选项中，也不是在选择的值中..

输入组件控制了保持值的 div。没有办法选择那个 div。

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

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

【讨论】：

【解决方案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;

【讨论】：