CODEWITHSUNDEEP
javascriptreactjs
Asking
Asking

Reputation: 4192

Add inside input a value when clicking on enter

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?

Upvotes: 0

Views: 92

Answers (4)

Anxium
Anxium

Reputation: 106

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*
})

Upvotes: 0

Simon
Simon

Reputation: 1

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} />;
};

Upvotes: 0

dave
dave

Reputation: 64657

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+")
);

Upvotes: 2

PassionateDeveloper
PassionateDeveloper

Reputation: 15138

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 "+".

Upvotes: 0

Related Questions