Есть вот такой интерфейс:
<div>
<input>
<button>insert</button>
</div>
<br>
<textarea></textarea>
Надо при нажатии кнопки вставить текст из инпута в textarea туда где стоит курсор. Как это сделать на React?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть вот такой интерфейс:
<div>
<input>
<button>insert</button>
</div>
<br>
<textarea></textarea>
Надо при нажатии кнопки вставить текст из инпута в textarea туда где стоит курсор. Как это сделать на React?
import { useRef, useState } from "react";
import "./App.css";
function App() {
const [value, setValue] = useState("");
const ref = useRef();
const onChange = (e) => {
setValue(() => e.target.value);
};
const onClick = (e) => {
let arr = ref.current.value.split("");
if(ref.current.selectionEnd !== ref.current.selectionStart){
arr.splice(ref.current.selectionStart, ref.current.selectionEnd - ref.current.selectionStart, value)
ref.current.value = arr.join("")
return
}
arr.splice(ref.current.selectionStart, 0, value);
ref.current.value = arr.join("");
};
return (
<>
<div>
<input onChange={onChange} value={value} />
<button onClick={onClick}>click</button>
</div>
<textarea ref={ref}></textarea>
</>
);
}
export default App;