Reactjs 如何查找用户何时停止键入受控组件？

我试图捕捉用户停止输入受控输入的时刻。在不受控制的部件内部，它发生得非常顺利

当我尝试使用

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

import React，{Component}来自“React”；
从“react dom”导入react dom；
从'react redux'导入{connect}；
导入“/styles.css”；
类主扩展组件{
状态={}
超时=空；
onChange=e=>{
this.props.handleInputChange（即target.value）；
}
render（）{
返回(
);
}
}
常量mapStateToProps=状态=>{
val:state.reducer.val
}
const mapDispatchToProps=调度=>{
handleInputChange：（val）=>调度（减速机更改输入（val））
}
连接（mapStateToProps、mapDispatchToProps）（主）；

---

当用户停止键入时，它应发送

changeInput

action

您可以通过以下方式执行此操作：

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)}
    />
  )
}

常量应用=（）=>{
const[value，setValue]=React.useState（“”）
React.useffect（（）=>{
常量超时=设置超时（（）=>{
dispatch（{type:“CHANGE_INPUT”，val:value}）；
}, 2000)
//如果此效果再次运行，因为'value'已更改，我们将删除以前的超时
return（）=>clearTimeout（超时）
}，[value]）
返回(
setValue（e.target.value）}
/>
)
}

---

每次

值

状态更改时，useffect函数都将运行。超时将开始，如果值在执行

setTimeout

函数之前再次更改（在我的示例中为2秒之后），则可以取消超时。

提供您的代码尝试解决问题，我们可以查看一下，看看有什么问题。好了，我已经说到这一点了！一旦用户停止键入，我将尝试发送

CHANGE\u INPUT

操作。请看一下上面的链接，你能详细说明一下我的代码和你的代码之间的区别吗？除了您给出的代码是用React hook编写的之外，它们是否都不是一个相同的东西？您的示例抛出了一个

TypeError

，因此我无法进行真正的比较。我希望得到的版本存在“只有最后一个字符作为输入rest”的问题。我对

值感到困惑。如果我从reducer道具接收到内部输入值，代码将如何更改？我的意思是
const-App=（value）=>…
这里有两种状态：一种是在redux中生存的状态（每500毫秒更新一次），另一种是本地状态（应该立即更新）。您希望在文本框中显示即时消息，因为您不希望在每次按键后等待500毫秒以查看结果，然后每隔500毫秒将其与redux中的消息保持同步。