Добавить внутри ввода значение при нажатии на ввод

Question

Я хочу добиться следующего результата:
Когда я начинаю набирать каждую строку из textarea ввода, чтобы добавить в начало textarea этот символ: +.
Сценарий следующий:

1. Тип запуска пользователя в первой строке, а после первой набранной буквы в начале строки должна появиться +.
   
2. Пользователь нажимает Enter, и в начале второй строки должен появиться еще один + и так далее.
   В конце я должен получить что-то вроде этого внутри текстового поля:
   + text from first row
+ text from second row
   ... ... ...
   demo: https://codesandbox.io/s/modest-hertz-tkyxv?file= /index.js
   Теперь идея не работает, потому что знаки + добавляются каждый раз, когда я печатаю.
   Вопрос : Как добиться того, что я описал выше ?

Answer 1

Вы можете сделать это так:

https://codesandbox.io/s/interesting-driscoll-2cvfq?file= / index. js: 261-525

const onChange = e => {
setState(
  e.target.value === "+"
    ? ""
    : (!state ? "+" : "") +
        e.target.value
          .split(/\n\+$/)
          .join("\n")
          .split(/\n[^+]/)
          .join("\n+")
);

Answer 2

Я бы так и сделал

  const onChange = e => {
    const inputValue = e.target.value;
    setState(prevState => {
      const newValue = inputValue.startsWith("+")
        ? inputValue
        : `+${inputValue}`;

      if (newValue.length < prevState.length && newValue.match(/\n$/)) {
        return newValue.replace(/\n$/, "");
      } else {
        return newValue.replace(/\n(?!\+)$/, "\n+");
      }
    });
  };

https://codesandbox.io/s/priceless-shannon-21j2d?file= / index. js: 250-650

Не забывайте, что доступ состояние в setState - не лучшая практика. Предпочитаю делать это так:

setState(prevState => {
  // do what you want with the prevState
  return *yourNewState*
})

Answer 3

вы могли бы сделать это:

const Text = () => {
  const [state, setState] = useState("+");

  const onChange = e => {
    setState(e.target.value);
  };
  const enter = e => {
    e.persist();
    e.preventDefault();
    setState(e.target.value + "\n+");
    console.log(state);
  };
  return <TextArea onChange={onChange} onPressEnter={enter} value={state} />;
};

Answer 4

Первая идея, которая приходит в голову, заключается в том, что вы проверяете, является ли ваш последний введенный ключ клавишей ввода, например этот член переполнения стека сделал .

Но когда я подумал об этом , мне кажется, ваша идея плохо продумана / описана: Что, если пользователь нажимает клавишу удаления? Следует ли пропустить "+"? Или нужно удалить "+", если строка пуста? Или просто добавьте «+» и больше не волнует?

В зависимости от того, что вы хотите показать пользователю со знаком «плюс», я бы попытался решить это другим способом. Можно добавить значок «+» перед каждой строкой ПЕРЕД текстом, это было бы проще кодировать, потому что пользователь не может взаимодействовать с «+».