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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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