reactjs - 如何仅在用户停止输入时才开始搜索？

Question

当用户停止输入时，我需要执行搜索。我知道我应该使用 setTimeout() 。但是对于 Reactjs，我无法找到它是如何工作的。 有人可以告诉我当用户停止输入几秒钟(假设 5 秒)时如何调用一个方法(将处理搜索)。我无法想象找出在哪里编写代码以检查用户是否已停止输入。

import React, {Component, PropTypes} from 'react';

export default class SearchBox extends Component {

    state={
      name:" ",
    }

    changeName = (event) => {
        this.setState({name: event.target.value}); 
    }

    sendToParent = () => {
        this.props.searching(this.state.name);
    }

    render() {
        return (
            <div>
                 <input type="text"  placeholder='Enter name you wish to Search.'  onChange={this.changeName} />

            </div>
        );
    }
}   

我想在用户停止输入时调用 sendToParent 方法。

Answer 1

使用useEffect钩子(Hook)实现:

function Search() {
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      console.log(searchTerm)
      // Send Axios request here
    }, 3000)

    return () => clearTimeout(delayDebounceFn)
  }, [searchTerm])

  return (
    <input
      autoFocus
      type='text'
      autoComplete='off'
      className='live-search-field'
      placeholder='Search here...'
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  )
}