react 防抖 传参数

在React中使用防抖并传递参数的方法有两种常见的写法。

方法一：使用lodash库的debounce函数。
在React组件中导入debounce函数后，可以直接在onChange事件处理函数中使用debounce函数来创建一个防抖的回调函数。在这个回调函数中，你可以通过e.target.value获取输入框的值，并传递给业务处理函数。

方法二：利用传参的方式实现。
在React组件中定义一个处理函数_handle来接收传入的value值，然后使用lodash库的debounce函数创建一个防抖的回调函数debounceHandler。在onChange事件处理函数中，将输入框的值传递给debounceHandler函数来实现防抖效果。

下面是两种写法的示例代码：

方法一：

import React from "react";
import { debounce } from "lodash";

export function ExampleComponent() {
  const onChange = e => {
    console.log(e.target.value);
  };

  const debouncedOnChange = debounce(onChange, 500);

  return <input onChange={debouncedOnChange} />;
}

方法二：

import React from "react";
import { debounce } from "lodash";

export function ExampleComponent() {
  const _handle = value => {
    console.log(value);
  };

  const debounceHandler = debounce(_handle, 500);

  const onChange = e => {
    debounceHandler(e.target.value);
  };

  return (
    <div>
      Search: <input onChange={onChange} />
    </div>
  );
}

以上是两种常见的在React中使用防抖并传递参数的方法。你可以根据自己的需求选择其中一种来实现。