React:在光标处插入值

Question

我需要添加一个值(从下拉列表中(，它将添加到"光标位置"的输入字段中：

import { useState } from "react";
import "./styles.css";
export default function App() {
const [cur, setCur] = useState("");
const [state, setState] = useState("");
const [dropVal, setDropVal] = useState("");
const handleChange = (e) => {
setState(e.target.value);
// gives cursor index 
// this only shows cursor position if user types 
// I need to track the position of the cursor and add dropVal there
setCur(e.target.selectionStart); 
};

return (
<div className="App">
<input onChange={(e) => handleChange(e)} value={state} />
<select onChange={(e) => setDropVal(e.target.value)} >
<option>ONE</option>
<option>TWO</option>
</select>  
</div>
);
}

我尝试过这个，但它是不完整的，找不到在任何地方实现它的方法。非常感谢您的帮助，提前感谢！！

Answer 1

您要查找的是输入字段上的selectionStart和selectionEnd属性。

基本上，您可以在输入字段上附加一个onBlur侦听器，在它内部，您可以访问selectionStart属性并将其保存在状态中。

模糊意味着输入字段失去了焦点(意味着你点击了外部的某个地方，就像我们的例子中的下拉列表(。因此，一旦onBlur被触发，selectionStart指的是当输入仍然处于焦点时光标所在的位置。

稍后，您可以使用该值来打断字符串，并在光标的位置添加您想要的任何内容(在本例中为选项值(。

const onBlur = (e) => {
setCur(e.target.selectionStart);
};

看看这个代码沙箱