0

Есть вот такой интерфейс:

<div>
  <input>
  <button>insert</button>
</div>
<br>
<textarea></textarea>

Надо при нажатии кнопки вставить текст из инпута в textarea туда где стоит курсор. Как это сделать на React?

2
  • туда где стоит курсор...? курсор один он не может одновременно быть и на кнопке и в textarea... поточнее
    – Armen
    27 апр 2021 в 13:31
  • @Armen поставил в текстовое поле курсор, тыкнул кнопку - вставился текст. Как в любом текстовом редакторе.
    – Developer
    27 апр 2021 в 13:32

1 ответ 1

1
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;
2
  • А если с обработкой выделения? То есть например в textarea было выделено слово, тыкнул кнопку - это слово заменилось на то что было в инпуте. А если ничего не было выделено то как и сейчас просто вставилось туда где курсор.
    – Developer
    27 апр 2021 в 13:57
  • 1
    @ПЭХАПЭШНИК обновил ответ
    – Armen
    27 апр 2021 в 15:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.