如何找到用户何时停止输入受控组件？

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 秒后），则可以取消超时。

如何找到用户何时停止输入受控组件？

How to find when user stops typing in controlled components?

forms

input

reactjs

react-redux

controlled-component