Отфильтровать пустые строки при вставке? - PullRequest
0 голосов
/ 20 марта 2019

У меня есть 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}
    />
  )}

1 Ответ

0 голосов
/ 20 марта 2019

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

...