,可以通过以下步骤实现:
import React, { useState } from 'react';
function MyComponent() {
const [text, setText] = useState(''); // 存储文本区域的内容
const [cursorPos, setCursorPos] = useState(0); // 存储光标位置
// 处理文本区域内容变化的函数
const handleTextChange = (event) => {
setText(event.target.value);
};
// 处理光标位置变化的函数
const handleCursorChange = (event) => {
setCursorPos(event.target.selectionStart);
};
return (
<div>
<select>
{/* 选项列表 */}
</select>
<textarea
value={text}
onChange={handleTextChange}
onSelect={handleCursorChange}
/>
</div>
);
}
export default MyComponent;
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<textarea
value={text}
onChange={handleTextChange}
onSelect={handleCursorChange}
/>
const handleInsertOption = () => {
const option = document.querySelector('select').value;
const newText = text.substring(0, cursorPos) + option + text.substring(cursorPos);
setText(newText);
};
完整的代码示例:
import React, { useState } from 'react';
function MyComponent() {
const [text, setText] = useState('');
const [cursorPos, setCursorPos] = useState(0);
const handleTextChange = (event) => {
setText(event.target.value);
};
const handleCursorChange = (event) => {
setCursorPos(event.target.selectionStart);
};
const handleInsertOption = () => {
const option = document.querySelector('select').value;
const newText = text.substring(0, cursorPos) + option + text.substring(cursorPos);
setText(newText);
};
return (
<div>
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<textarea
value={text}
onChange={handleTextChange}
onSelect={handleCursorChange}
/>
<button onClick={handleInsertOption}>Insert Option</button>
</div>
);
}
export default MyComponent;
这样,当用户选择一个选项后,点击"Insert Option"按钮,选项将会被插入到文本区域的光标位置处。
领取专属 10元无门槛券
手把手带您无忧上云