用戶停止輸入后運行功能

Question

我得到一個文本框，一旦用戶停止鍵入，我想更新結果（他們鍵入的內容將應用於數據數組，並過濾​​掉與他們鍵入的內容匹配的任何內容）。

現在我正在使用onBlur，但是這當然只會在他們離開文本框后才激活。

最好做onChange並放置一個計時器，如果它們繼續鍵入，該計時器將被取消？

或者，還有更好的方法。

不確定是否會有所作為，但我是reactjs

Answer 1

香草javascript（沒有React ）

 var inputElm = document.querySelector('input'); inputElm.addEventListener('input', onInput); function onInput(){ var duration = 1000; clearTimeout(inputElm._timer); inputElm._timer = setTimeout(()=>{ update(this.value); }, duration); } function update(){ console.log('Do something') } 

 <input> 

在React中，您可能會這樣：

class SomeComp extends Component {
    constructor(props){
        super(props);

        this.state = {
            inputValue: ''
        }
    }

    onInput = (e) => {
        var duration = 1000;
          clearTimeout(this.inputTimer);
          this.inputTimer = setTimeout(()=>{
            this.updateInputValue( e.target.value );
        }, duration);
    }

    updateInputValue = ( value )=> {
        this.setState({
            inputValue: value
        });
    }

    render(){
        return(
            <input value={this.state.inputValue} onChange={this.onInput(evt)}/>
        )
    }
}

Answer 2

只需使用onkeyup事件，它將在用戶釋放鍵盤按鈕時觸發。

document.getElementById('inputText').onkeyup = UpdateData()