Как вставить текст из инпута в текстовое поле?

Question

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

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

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

Answer 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;

БЛОГ НА HUSL

Как вставить текст из инпута в текстовое поле?

Ответы (1 шт):