0

I want to achieve the next result:
When i start type on each row from textarea input, to add at the beginning of the textarea this symbol: +.
The scenario is next:

  1. User start type on first line and after first typed letter should appears + at the beginning of the row.
  2. User clicks on enter and at the beginning of the second row should appear another +, and so on.
    At the end i should get something like this inside textarea:
    + text from first row
    + text from second row
    ... ... ...
    demo: https://codesandbox.io/s/modest-hertz-tkyxv?file=/index.js
    Now the idea does not work, because + signs are added every time when i type.
    Question: How to achieve what i described above?
Asking
  • 3,487
  • 11
  • 51
  • 106
  • This is a case where I want to ask "why?" Because while it certainly could be done, it is going to take more work than you think. That's because the user can edit their own input using backspace, select and delete, etc. I see your first answer just now says the same thing. Rethink. – see sharper Aug 03 '20 at 06:27

4 Answers4

2

You could do it like this:

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+")
);
dave
  • 62,300
  • 5
  • 72
  • 93
0

The first idea which comes in mind is, that you check if your last entered key is the enter key like this Stack overflow member did.

But, when I thought of it, it comes to my mind that your idea is not well thought / descriped:
What is, if the user hits the delete key?
Should the "+" be gone?
Or should the "+" be deleted if the row is empty?
Or just add the "+" and don't care any more?

Depending on what you want to show the user with the plus-sign I would try to solve it another way. Maybe add a "+"-Icon in front of each line BEFORE the text, that would be more simple to code, because the user can't interact with the "+".

PassionateDeveloper
  • 14,558
  • 34
  • 107
  • 176
  • could you help with this: `Maybe add a "+"-Icon in front of each line BEFORE the text, that would be more simple to code, because the user can't interact with the "+".` ? – Asking Aug 03 '20 at 06:29
  • if the user delete the text from a row fro example, (`+my text`), now when user will delete `m` letter, the `+` should be removed. Will be great if you will help. – Asking Aug 03 '20 at 06:35
  • Yeah, that is what I thought: If you want the user not to be able to interact with the + that would be a hell lot of work- Why? Becuase the user could click the + and delete it (e.g. not with backspace but with delete key) Can you explain what the sense of this + sign is? – PassionateDeveloper Aug 03 '20 at 06:38
  • `+` is just a sign that shouw to user that he is on another row – Asking Aug 03 '20 at 06:39
  • 1
    Well, if that is the think, I would not add the + into the textbox, because why? The value of the textbox will problably be used later, a visual help should not be within the value of the textbox, just UX speaking – PassionateDeveloper Aug 03 '20 at 06:41
  • so, what anotther solution could exists to implement my idea? – Asking Aug 03 '20 at 06:42
  • @AskMen why can't the user see they are on another line? – see sharper Aug 03 '20 at 06:43
  • Well: 1) leave it as it is. Because the user is allready teached to know how a textbox works. You didn't invent the textbox, it is everywhere... 2) If you incist in having that you could just write a text above or under the textbox like "you add [3] lines now" where the simple number is updated when typing and count the lines. 3) you could a dd a + sign BEFORE the textbox in each row he is typing.... – PassionateDeveloper Aug 03 '20 at 06:45
0

you could do this:

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} />;
};
Simon
  • 1
0

I would have done it that way

  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

Don't forget that accessing the state in a setState isn't a best practice. Prefer to do this like this:

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