react 输入框 input 防抖 debounce

react  input  debounce

1.需求

当我输入文本时候，对文本进行设置处理 （监控文本更新自动后请求接口）

希望实时的设置输入文字  不使用blur  但是change请求太过于频繁

主要是针对输入框防抖处理

2.处理

使用 lodash 的 debounce 

3.遇到的问题

浏览器报异常： Uncaught TypeError: Cannot read property 'value' of null。

如果在react中想异步访问事件属性（如在setTimeout内），应该在是处理事件时调用event.persist()，这会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。

 

import { debounce } from 'lodash';


const debounceCom = React.Fc() => {
    
  const [text, setText] = useState('');


  // 设置文本
  function handleText(event: React.ChangeEvent<HTMLInputElement>) {
    event.persist();
    debounceSetText(event);
  }

  const debounceSetText = debounce((event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  }, 500);



    return(
     <Form>
         <Form.Item name="text" label="文本：">
              <Input placeholder="输入文本" onChange={handleText} />
         </Form.Item>
     </From>
    )

}