无法从输入反应 js 中的搜索中删除第一个字符

Question

我制作了一个带有去抖动功能的搜索字段。一切正常，但是当我尝试用退格键清空搜索字段时，它会不断重新显示所有字符并且不会删除它们（第一个字符始终存在）。

你可以在附件gif中看到它

我的父组件

  class ParentComponent extends React.Component {
        this.queryParam = {
                keyword: ''
             }
   
  keywordSearch = value => {
     const {
       history: { push },
       match: { url },
       location: { search },
       } = this.props;

    queryParams = {...queryParams, keyword: value, };

    push(`${url}?${queryString})
   };
   
   render() {
        <SearchComponent
            value={this.queryParams.keyword}
            onUpdate={this.keywordSearch}
         />
     }
  }

我的搜索字段组件

   const SearchComponent = ({ value, onUpdate }) => {
    const [fieldValue, setFieldValue] = useState(value);

    const handleChange = ({ target: { value } }) => {
       debounceFunc(() => {
            onUpdate(value);
         }, 300);
         setFieldValue(value);
        };

   return (
      <Input
      value={fieldValue || value}
      disableUnderline
      onChange={handleChange}
      className={classes.root}
      placeholder='Search'
      startAdornment={
         <InputAdornment position="start">
           <Search className={classes.icon} fontSize="small" />
         </InputAdornment>
        }
     />
  }

这是我自定义的去抖组件

  export const debounceFunction = () => {
    let timeOut = null;
    return (callBack, wait) => {
    if (timeOut) clearTimeout(timeOut);
    timeOut = setTimeout(() => {
        callBack();
     }, wait);
    };
   };
  export const debounceFunc = debounceFunction();

问题出在这个去抖功能上。任何人都可以在这方面帮助我吗？为什么不删除第一个字符？谢谢

Answer 1

我更改了 debounceFunction 参数和使用方法。可以试试吗

    const SearchComponent = ({ value, onUpdate }) => {
        const [fieldValue, setFieldValue] = useState(value);
        
const debouncedUpdate = debounceFunction(onUpdate, 300);

        const handleChange = ({ target: { value } }) => {
           debouncedUpdate(value);
            setFieldValue(value);
           };
    
       return (
          <Input
          value={fieldValue || value}
          disableUnderline
          onChange={handleChange}
          className={classes.root}
          placeholder='Search'
          startAdornment={
             <InputAdornment position="start">
               <Search className={classes.icon} fontSize="small" />
             </InputAdornment>
            }
         />
      } 
    
      
    
    export const debounceFunction = (callBack, wait) => {
        let timeOut = null;
        return () => {
        if (timeOut) clearTimeout(timeOut);
        timeOut = setTimeout(() => {
            callBack();
         }, wait);
        };
       };
      export const debounceFunc = debounceFunction();

Answer 2

第一个问题是<Input value={fieldValue || value}
=> 只使用本地状态： <Input value={fieldValue} 立即更改可见值。

第二个问题是 this.queryParams.keyword 作为一个实例属性，而不是 React 状态
=> 使用 this.state.... 和 this.setState(...)（或 Hooks）更新父级

中的去抖动状态

无法从输入反应 js 中的搜索中删除第一个字符

unable to remove first character from search in input react js

javascript

reactjs

search

debounce