Question

对于搜索框，我有2种情况。

场景1

用户将一些数据粘贴到框中，每新行进行一次搜索。

场景2

用户通过使用“ Shift + Enter”创建新行来输入每个搜索行。

示例粘贴数据

当他们粘贴以上数据时，我想删除所有空白行。我可以通过过滤来做到这一点，但这会带来“ 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}
    />
  )}

Answer 1

鉴于您希望在用户粘贴内容时删除新行，因此最好为此活动专门使用onPaste（而不是onChange）synthetic event provided by React。每次输入元素注册其值的更改（无论是通过粘贴还是由用户直接输入）时，都会触发onChange。如果需要，您可以将两者结合使用。

筛选出粘贴上的空行？

1 个答案: