Отфильтровать пустые строки при вставке?

У меня есть 2 сценария для окна поиска.

Сценарий 1

Пользователь вставляет некоторые данные в поле, 1 поиск на новую строку.

Сценарий 2

Пользователь вводит в каждую строку поиска, используя «Shift + Enter» для создания новых строк.

Пример вставки данных

1

2

3

4

5

7



8






9



10

Когда они вставляют эти данные выше, я хочу удалить все пустые строки. Я могу сделать это с помощью фильтрации, но побочный эффект «Shift + Enter» не работает.

  // creates how many lines text area should be
  pastedData = event => {
    var clipboardData = event.clipboardData.getData('Text');

    var count = clipboardData.split('\n').length;
    if (count > 1) {
      this.rowCount = count;
    }
  };

  @action
  onChange = event => {
    const value = event.target.value;
    const splitValues = value.split('\n');

    this.rowCount = splitValues.length;

    if (this.rowCount > 100){
       this.searchValue = splitValues.slice(0, 100).join('\n'); 
    }else {

      this.searchValue =  value;
      // if I do this instead, this will remove all empty lines but shift + enter will not work anymore.
      //this.searchValue = splitValues.filter(x => x).join('\n');
    }

  };

  @action
  onKeyDown = event => {
    if (event.key == 'Enter' && event.shiftKey) {
      // make text area bigger.
      this.rowCount = this.rowCount + 1;
    } else if (event.key == 'Enter') {
      //submit form
    }
  };

 // switches between an normal text box and textarea is more than 1 line is entered.
  {this.rowCount === 1 ? (
    <input
      autoFocus = {true}
      className = "input"
      type = "text"
      name = "searchValue"
      onPaste = {this.pastedData}
      onChange = {this.onChange}
      onKeyDown = {this.onKeyDown}
      value = {this.searchValue}
    />
  ) : (
    <textarea
      autoFocus = {true}
      className = "textarea"
      name = "search-area"
      rows = {this.rowCount}
      value = {this.searchValue}
      onChange = {this.onChange}
      onKeyDown = {this.onKeyDown}
    />
  )}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
227
1

Ответы 1

Учитывая, что вы хотите, чтобы новые строки удалялись, когда пользователь что-то вставляет, лучше всего использовать onPaste (вместо onChange) синтетическое событие, предоставленное React исключительно для этого действия. onChange срабатывает каждый раз, когда элемент ввода регистрирует изменение своего значения, будь то вставка или прямой ввод пользователем. Вы можете использовать оба вместе, если возникнет необходимость.

Итак, я бы использовал как OnPaste, так и OnChange (для shift + enter?) У вас есть пример совместной работы?

chobo2 20.03.2019 19:37

Было бы очень полезно, если бы вы предоставили нам jsfiddle со всем кодом, с которым мы могли бы повозиться.

Jibin Joseph 20.03.2019 19:39

Другие вопросы по теме