Javascript 实施Lodash&x27；在ReactJS功能组件中消除抖动

我正在尝试使用Lodash的

debounce

函数来消除文本输入字段的变化

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  const onChange = debounce((e) => {
    const { value } = e.target;
    console.log('debounced value', value)
  }, 1000)

  return (

    <input type="text" onChange={ onChange } />

  )
};

从“React”导入React；
从“lodash.debounce”进口debounce；
常量输入=（）=>{
const onChange=debounce（（e）=>{
const{value}=e.target；
console.log（'debounced value'，value）
}, 1000)
返回(
)
};

上面的代码引发以下错误：

警告：出于性能原因，将重用此合成事件。如果您看到了这一点，那么您正在访问已发布/已取消的合成事件的属性目标。这被设置为null。如果必须保留原始合成事件，请使用event.persist（）

未捕获的TypeError:无法读取null的属性“值”

---

什么是正确的实现？

修复程序不是从事件中检索值，而是直接从输入中使用ref

import React, { useRef } from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  const input = useRef( null )

  const onChange = debounce(() => {
    console.log('debounced value', input.current.value)
  }, 1000)

  return (

    <input ref={ input } type="text" onChange={ onChange } />

  )
};

import React，{useRef}来自“React”；
从“lodash.debounce”进口debounce；
常量输入=（）=>{
常量输入=useRef（空）
const onChange=debounce（（）=>{
console.log（'debounced value'，input.current.value）
}, 1000)
返回(
)
};

当使用REF时，REF有几个很好的用例：

• 管理焦点、文本选择或媒体播放
• 触发命令式动画
• 与第三方DOM库集成

避免对任何可以声明式完成的操作使用引用

按照您定义

输入的方式

，我假设它将在许多地方使用。所以，我会这样做：

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  // Debounced function
  // `printValue` only cares about last state of target.value
  const printValue = debounce(value => console.log(value), 1000);

  // Event listener called on every change
  const onChange = ({ target }) => printValue(target.value);

  return <input type="text" onChange={ onChange } />;    

};

从“React”导入React；
从“lodash.debounce”进口debounce；
常量输入=（）=>{
//去模糊函数
//`printValue`只关心target.value的最后一个状态
常量printValue=debounce（值=>console.log（值），1000）；
//事件侦听器在每次更改时调用
const onChange=（{target}）=>printValue（target.value）；
返回；
};

您需要在输入标记中发送值。请参阅本文中的示例实现：您不需要在本文中使用ref。那么如何在不使用状态的情况下检索该值呢？如果有更好的方法，我希望能多解释一下。谢谢。将字符串

event.target.value

而不是整个

event

传递到

debounce

确实是一种方法

react@^16.12.0

“@chakra ui/react”：“^1.0.0”