Question

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

Answer 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>
        );
      }
    }

Answer 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演示

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

2 个答案: