ReactJS 如何禁用文本选择

在本文中，我们将看到如何在ReactJS中禁用文本选择。Web应用程序经常提供一个称为文本选择的宝贵功能，使用户可以轻松地在网页上突出显示和复制内容。然而，有一些情况下禁用文本选择变得必要，以限制用户复制或与应用程序的特定部分进行交互。

语法

const noSelectElements =  
    document.querySelectorAll(".no-select");  

noSelectElements.forEach((element) => {  
    element.style.webkitUserSelect = "none";  
    element.style.mozUserSelect = "none";  
    element.style.msUserSelect = "none";  
    element.style.userSelect = "none";  
});

先决条件

React入门
React Hooks
NPM或NPX

创建React应用的步骤

步骤1：使用以下命令创建一个React应用

npx create-react-app <<My-Project>>

步骤2：创建项目文件夹，比如TextSelectionApp，使用以下命令进行导航：

cd  <<My-Project>>

项目结构

ReactJS 如何禁用文本选择

使用ReactJS禁用文本选择的方法

有不同的方法可以使用ReactJS禁用文本选择。让我们逐一讨论每种方法。

禁用特定元素的文本选择
切换文本选择的开关

方法1：禁用特定元素的文本选择

在这种方法中，我们将使用ReactJS仅禁用特定文本而不是所有文本。该功能通过使用useEffect钩子实现，该钩子在组件挂载后执行。执行时，它会定位所有带有“no-select”类的元素并对其应用样式，特别是操纵像webkitUserSelect、mozUserSelect、msUserSelect和userSelect之类的属性。通过将这些属性设置为“none”，用户有效地被阻止选择或突出显示这些元素中的任何文本。

示例： 在这个示例中，我们将使用上述解释的方法。

// App.js file 
  
import React, { useEffect } from "react"; 
  
const App = () => { 
    useEffect(() => { 
  
        // Disable text selection for elements 
        // with class "no-select" 
        const noSelectElements = 
            document.querySelectorAll(".no-select"); 
        noSelectElements.forEach((element) => { 
            element.style.webkitUserSelect = "none"; 
            element.style.mozUserSelect = "none"; 
            element.style.msUserSelect = "none"; 
            element.style.userSelect = "none"; 
        }); 
    }, []); 
  
    return ( 
        <div style={styles.body}> 
            <div style={styles.container}> 
                <h1>Disable Text Selection Using React</h1> 
                <div 
                    className="no-select"
                    style={styles.noSelect} 
                > 
                    <h1>Welcome To Geeksforgeeks</h1> 
                    <p>This text is not selectable</p> 
                </div> 
                <p style={styles.p}> 
                    A Computer Science portal for geeks. It 
                    contains well-written, well-thought, and 
                    well-explained computer science and 
                    programming articles. 
                </p> 
            </div> 
        </div> 
    ); 
}; 
  
export default App; 
  
const styles = { 
    body: { 
        fontFamily: "Arial, sans-serif", 
        margin: 0, 
        padding: 0, 
    }, 
    container: { 
        maxWidth: "800px", 
        margin: "0 auto", 
        padding: "20px", 
        backgroundColor: "#fff", 
        border: "1px solid #ccc", 
        borderRadius: "5px", 
        boxShadow: "0 0px 10px 0px black", 
        margin: "4rem", 
    }, 
    noSelect: { 
        border: "3px solid green", 
        padding: "20px", 
        backgroundColor: "#f9f9f9", 
        borderRadius: "10px", 
        marginBottom: "10px", 
        color: "green", 
    }, 
    p: { 
        lineHeight: "1.6", 
    }, 
};

运行步骤：

要打开应用程序，请使用终端并输入下面列出的命令。

npm start

输出 :

ReactJS 如何禁用文本选择

方法2：开启和关闭文本选择

这个示例展示了一个React组件，它可以轻松地在两个状态之间切换。它使用户能够启用或禁用文本选择，并改变按钮的背景颜色。通过使用useState钩子，这个组件有效地管理这些状态。通过点击按钮，用户可以无缝地在迷人的蓝色和红色背景之间切换，同时控制在页面上选择文本的能力。

示例： 在这个示例中，我们使用了上面解释的方法。

// App.js file 
  
import React, { useState } from "react"; 
  
const App = () => { 
    const [allowTextSelection, setAllowTextSelection] = 
        useState(true); 
    const [isBlueBackground, setIsBlueBackground] = 
        useState(true); 
  
    const toggleTextSelection = () => { 
        setAllowTextSelection(!allowTextSelection); 
    }; 
  
    const handleButtonClick = () => { 
  
        // Toggle between two colors 
        setIsBlueBackground(!isBlueBackground); 
  
        // Toggle text selection 
        toggleTextSelection(); 
    }; 
  
    const bodyStyle = { 
        fontFamily: "Arial, sans-serif", 
        margin: 0, 
        padding: 0, 
        backgroundColor: "#f5f5f5", 
        display: "flex", 
        alignItems: "center", 
        justifyContent: "center", 
        height: "100vh", 
    }; 
  
    const containerStyle = { 
        maxWidth: "600px", 
        padding: "20px", 
        backgroundColor: "#fff", 
        border: "1px solid #ccc", 
        borderRadius: "8px", 
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", 
        textAlign: "center", 
    }; 
  
    const buttonStyle = { 
        backgroundColor: isBlueBackground 
            ? "#007bff"
            : "red", // Toggle between two colors 
        color: "white", 
        border: "none", 
        padding: "10px 20px", 
        borderRadius: "5px", 
        cursor: "pointer", 
        fontSize: "16px", 
        transition: "background-color 0.3s ease", 
    }; 
  
    if (!allowTextSelection) { 
        bodyStyle.userSelect = "none"; 
    } 
  
    return ( 
        <div style={bodyStyle}> 
            <div style={containerStyle}> 
                <h1>Welcome To GeeksforGeeks</h1> 
                <p> 
                    A Computer Science portal for geeks. It 
                    contains well-written, well-thought, and 
                    well-explained computer science and 
                    programming articles. 
                </p> 
                <button 
                    id="toggle-button"
                    style={buttonStyle} 
                    onClick={handleButtonClick} 
                > 
                    Toggle Text Selection 
                </button> 
            </div> 
        </div> 
    ); 
}; 
  
export default App;