阅读量:0
要实现前端选区,可以使用React中的useRef
和useState
来处理选区的状态,并使用window.getSelection()
方法来获取选区信息。
首先,在组件中定义一个用于存储选区的ref
和一个用于存储选区状态的state
:
import React, { useState, useRef } from 'react'; function App() { const [selection, setSelection] = useState(null); const textRef = useRef(null); // 处理选区变化的函数 const handleSelectionChange = () => { const selectedText = window.getSelection().toString(); setSelection(selectedText); }; return ( <div> <div ref={textRef} onMouseUp={handleSelectionChange}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <p>选中的文本:{selection}</p> </div> ); } export default App;
然后,在div
元素上添加一个onMouseUp
事件处理函数,该函数会在鼠标松开时触发。在函数中,我们使用window.getSelection().toString()
来获取选中的文本,并将其设置为选区状态。
最后,在页面上渲染选中的文本,即可实现前端选区功能。