如何查找用户何时停止在受控组件中键入内容?

Question

我正在尝试捕捉用户停止输入受控输入的时刻。它在不受控制的组件内部发生得如此顺利。

当我尝试使用setTimeout时，只有最后一个字符作为输入其余部分没有输入。我不确定为什么会发生这种情况

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {connect} from 'react-redux';
import "./styles.css";
class Main extends Component{
state={}
timeout = null;
onChange = e => {
this.props.handleInputChange(e.target.value);
}
render(){
return (
<div className="Main">
<input type='text' value={this.props.val} onChange={this.onChange}/>
</div>
);
}
}
const mapStateToProps = state => {
val: state.reducer.val
}
const mapDispatchToProps = dispatch => {
handleInputChange: (val)=>dispatch(reducer.changeInput(val))
}
connect(mapStateToProps,mapDispatchToProps)(Main);

当用户停止键入时，它应调度changeInput操作

Answer 1

你可以用这样的东西来做到这一点：

const App = () => {
const [value, setValue] = React.useState('')
React.useEffect(() => {
const timeout = setTimeout(() => {
store.dispatch({ type: "CHANGE_INPUT", val: value });
}, 2000)
// if this effect run again, because `value` changed, we remove the previous timeout
return () => clearTimeout(timeout)
}, [value])
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
)
}

每次value状态更改时，useEffect 函数都会运行。超时将开始，如果在执行setTimeout函数之前再次更改值(在我的示例中为 2 秒后(，则可以取消超时。