Показывать предупреждение, когда пользователь перестает печатать в ReactJS
Я хочу показать предупреждающее сообщение в ReactJS, когда пользователь перестанет вводить текст в поле формы.
Конечно, это не будет проблемой. Если это можно сделать на чистом JS. все будет хорошо
Вот так: <input type = "text" onblur = "alert('x')">
Вы имеете в виду диалоговое окно предупреждения, это будет не очень приятный пользовательский интерфейс. Если вы имеете в виду какую-то форму информационного окна предупреждения, это было бы не так уж плохо.
Я имею в виду, когда пользователь перестал печатать, я хочу отобразить предупреждающее сообщение
Это должно дать вам ответ, как говорили другие, это не относится к React: stackoverflow.com/questions/1909441/…
@Joru, да, потому что все ответы даются через Jquery
@ Джон, тебе нужна только первая часть этого ответа - функция delay. Это будет ваш обработчик событий React.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Этот может вам помочь.
Такого рода функции не специфичны для React, поэтому вы можете добиться этого разными способами с помощью JS.
Простой компонент:
class App extends Component {
typingTimer = null;
handleChangeEvent = (evt) => {
const val = evt.target.value;
clearTimeout(this.typingTimer);
this.typingTimer = setTimeout(() => {
if (val) {
window.alert('Stopped typing !');
}
}, 500);
}
componentWillUnmount() {
clearTimeout(this.typingTimer);
}
render() {
return (
<div>
<input onChange = {this.handleChangeEvent} />
</div>
);
}
}
Основное содержание вашего ответа находится по вашей ссылке. Чтобы сделать ваш ответ надежным, скопируйте соответствующую информацию из вашей ссылки в свой ответ..
Замечательно. Спасибо за улучшение @AbdelkarimELAMEL.
@AbdelkarimELAMEL . Не могли бы вы помочь мне, как остановить оповещение, когда пользователь удаляет текст из ввода. Здесь, когда я остановился, предупреждение о наборе текста работает нормально, но когда я удаляю текст из ввода, оно возникает снова. Я просто хочу показать предупреждение о прекращении ввода, а не как текст, удаленный пользователем.
Здесь я создал функциональный компонент React для собственного использования.
const App = () => {
let typingTimer = null;
const makeAnApiCall =(inputValue) => {
console.info("Making an Ajax Call");
window.alert('Making an Ajax Call');
}
const handleChangeEvent = (evt) => {
const val = evt.target.value;
clearTimeout(typingTimer);
typingTimer = setTimeout(() => {
if (val) {
makeAnApiCall(val)
}
}, 500);
}
useEffect(() => {
return () => {
clearTimeout(typingTimer);
}
}, [])
return (
<div>
<input type = "text" onChange = {handleChangeEvent} />
</div>
);
}Демонстрация Workgin на стекблиц
Вам не нужно думать конкретно о реакции в этой ситуации. Это должно быть сделано с помощью чистого js со слушателем в поле ввода.