用户停止输入后处理更新的最佳方式是什么？ [关闭]答案

【问题标题】：What is the best way to handle updates after a user stops typing? [closed]用户停止输入后处理更新的最佳方式是什么？ [关闭]
【发布时间】：2018-12-27 19:04:49
【问题描述】：

我有一个子组件表单，一旦用户停止输入，我就会传递和 updateDraft 函数。这是最好的处理方式吗？

const updateTimer = (props) => {
    if (this.timeout) clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
        props.updateDraft
    }, 5000)
};

    const Form = (props) => {

        return(
            <Input type="text" 
    onKeyUp={updateTimer(props)} 
    onChange={props.onChange} 
    />
        )

    }

【问题讨论】：

要求“最好的方法”就是要求固执己见的答案。不要以这种方式表达你的问题，而是陈述问题并寻求解决方案。让答案回答他们认为有效的解决方案，然后您让您选择您认为最好的解决方案。
只需添加一个提交按钮，如果单击该按钮，则只处理输入的数据。这条路线使您作为程序员以及可能仍想输入更多数据但停下来思考的用户更容易。但是，如果您正在谈论实时渲染功能，例如自动完成下拉菜单或类似的东西，只需使用 onchange 并将输入的每个键推送到状态属性，然后在状态发生变化时处理状态中的数据。跨度>

标签： javascript reactjs

【解决方案1】：

您可以使用onblur - 当用户退出表单时。如果您的功能没有太多可做的，您可以轻松使用onchange、onkeyup。正如@AndrewL 提到的，您也可以添加按钮，但是这些解决方案中的任何一个都可能比设置超时更好。

【讨论】：

谢谢我不知道 onBlur