【问题标题】: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

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

【问题讨论】:

标签: 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;
    
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-29
      • 1970-01-01
      • 2011-06-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多