2

как при замене в textarea через регулярку сохранить позицию курсора? Сейчас при наборе текста,если встречается 2(два) в тексте она заменяется на 3 и курсор перепрыгивает в конец, если нету 2 то не перепрыгивает. https://codesandbox.io/s/nifty-haze-rb7kp

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [text, setText] = useState("");
  useEffect(() => {
    setText(text.replace("2", "3"));
  }, [text]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <textarea value={text} onChange={e => setText(e.target.value)} />
      <br />
      {text}
    </div>
  );
}
3
  • 1
    Я ничего не понял если честно.
    – Randall
    Commented 17 мая 2020 в 9:31
  • @ИзбытокСусликов это было сложнее всего :)
    – ZiiMakc
    Commented 17 мая 2020 в 10:16
  • 1
    @RTW иногда такие вопросы пишут что думаю даже сами авторы не понимают зачем им такая логика) 🤔
    – Randall
    Commented 17 мая 2020 в 10:25

1 ответ 1

3

Добавьте переменную position и сохраняйте в неё последнюю позицию каретки при событии onChange (ручном вводе).

После срабатывания useEffect устанавливайте каретку на нужное место(position).

Sandbox.

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const [text, setText] = useState("");
  const [pos, setPos] = useState(0);
  const ref = useRef(null);

  useEffect(() => {
    setText(text.replace("2", "3"));
    ref.current.selectionStart = pos;
    ref.current.selectionEnd = pos;
  }, [text, pos]);

  const handler = e => {
    setPos(e.target.selectionStart);
    setText(e.target.value);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>{pos}</p>
      <textarea value={text} onChange={handler} ref={ref} />
      <br />
      {text}
    </div>
  );
}

Ваш ответ

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

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