Question

我希望自动选择span元素中的一些文本，以便用户可以轻松复制它。

我已尝试使用.select()但是，这似乎仅适用于<input>＆amp; <textarea>元素;我的文本在<span>范围内，我不想更改它，因为我处理我的应用程序中的所有文本与另一个负责样式的组件（回答@dandavis因为评论不适合我）

我的文字在弹出窗口中呈现，因此我想显示为用户选择的内容。

以下是我的尝试：

import React from "react";
const PropTypes = React.PropTypes;

class CopyText extends React.Component {
    constructor(props) {
        super(props);
        this.handleRef = this.handleRef.bind(this);
    }

    componentDidUpdate() {
        this.copyText.select();
    }

    handleRef(component) {
        this.copyText = component;
    }

    render() {
        return (
            <span ref={this.handleRef}>
                {this.props.text}
            </span>
        );
    }
}

CopyText.propTypes = {
    text: PropTypes.string
};

export default CopyText;

是否有人能够帮助我为span元素创建自定义自动选择文本功能？非常感谢您的建议。

Answer 1

您可以尝试

<span ref={textAreaRef}>your text</span>
<Button type="button" onClick={() => copyEmail()}>copy</Button>

和复制功能应如下所示：

const copyEmail = () => {
    let currentNode = textAreaRef.current;
    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(currentNode);
        range.select();
        document.execCommand('copy');
        range.remove();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(currentNode);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        selection.removeAllRanges();
    } else {
        alert("Could not select text, Unsupported browser");
    }
}

这将起作用我已经用过useRef来创建一个参考

const textAreaRef = useRef(null);

使用ReactJS自动选择span标记

1 个答案: