当用户停止输入 ReactJS 时显示警报答案

【问题标题】：Show an alert when a user stops typing in ReactJS当用户停止输入 ReactJS 时显示警报
【发布时间】：2019-08-25 11:16:13
【问题描述】：

当用户停止在表单字段中输入时，我想在 ReactJS 中显示一条警告消息。

【问题讨论】：

在这种情况下，您无需考虑具体到 reactjs。这是用纯js的方式在输入框上加上一个监听器来完成的。
当然没问题。如果这可以用纯 JS 完成。会好的
像这样：
你的意思是一个警告对话框，那不是很好的用户界面。如果您的意思是某种形式的警报信息框，那还不错。
这应该会给你答案，因为其他人说它不是 React 特有的：stackoverflow.com/questions/1909441/…

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

This可以帮到你。

这类功能不是 React 特有的，因此您可以通过 JS 以多种方式实现。

简单组件：

    class App extends Component {
      typingTimer = null;

     handleChange = (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.handleChange} /> 
          </div>
        );
      }
    }

【讨论】：

您的答案的主要内容似乎位于您的链接中。 To make your answer robust, please copy the relevant information from your link into your answer.
太好了。感谢@AbdelkarimELAMEL 的改进。
@AbdelkarimELAMEL 。当用户从输入中删除文本时，你能帮我如何停止警报吗？在这里，当我停止打字时，警报工作正常，但是当我从输入中删除文本时，它再次出现。我只想在停止输入时显示警报，而不是像用户删除的文本

【解决方案2】：

在这里，我创建了 React 功能组件供我使用。

const App = () => {
  let typingTimer = null;

  const makeAnApiCall =(inputValue) => {
        console.log("Making an Ajax Call");
        window.alert('Making an Ajax Call');
    }
  
  const handleChange = (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={handleChange} /> 
      </div>
    );
}

stackblitz 上的 Workgin 演示

【讨论】：