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