输入不起作用时在React功能组件上反跳

编程问答 2022-06-09

问题描述

我有一个表单组件，我想在输入时执行一个API请求。我想对此进行反跳，这样我就不会向服务器发送垃圾邮件。这是我的代码：

export default function MyItem ({ id,name }) {
  const debouncePatch = (name) => {
    debounce(patchItem.bind(this,id,name),500)
  }
  return (
    <div>
      <form
        type='text'
        value={name}
        onChange={(evt) => debouncePatch(evt.target.value)}
      />
    </div>
)
}

修补程序项对服务器进行了简单的修补程序调用，以便该项的名称在我输入时更新。看起来像这样：

export default function patchItem (id,name,) {
  return axios.patch(`${MY_BASE_URL}/${id}`,{ name })
}

使用反跳功能根本无法正常工作。永远不会调用patchItem函数。我该如何解决？

解决方法

您每次对debounce进行更改时都会调用input，但是每次都会创建一个新的去抖动功能。您需要创建一个防反跳功能，然后将其用作事件处理程序。像这样：

function MyItem({ id,name }) {
  let debouncePatch = debounce((id,name) => {
    patchItem(id,name);
  },500);

  // OR SIMPLER
  let debouncePatch = _.debounce(patchItem,500);
  return (
    <div>
      <input
        type="text"
        defaultValue={name}
        onChange={(event) => debouncePatch(id,event.target.value)}
      />
    </div>
  );
}

还要确保输入得到的是defaultValue而不是value，以便可以对其进行编辑。

,

这里有2个问题。首先，对返回函数进行反跳操作，因此您需要调用该函数。

第二，如果您不记住去抖动功能，那么它将无法正常工作，因为每次重新渲染都会创建一个新的去抖动功能，因此无法达到去抖动的目的。

尝试这样的事情：

&global
,

使您的输入可控， 并且您可以使用简单的工具 use-debounce 

import { useDebounce } from 'use-debounce';

export default function MyItem ({ id,name }) {
  const [value,setValue] = useState('')
  const [debouncedValue] = useDebounce(value,1000);

  const handleChange = useCallback((e) => {setValue(e.target.value)},[])

  useEffect(() => {
    console.log(debouncedValue);
    *// here you can place any code what you need. **console.log** will be displayed every second,or any time that you may change in hook above.* 
  },[debouncedValue])

  return (
    <div>
      <form
        type='text'
        value={name}
        onChange={handleChange}
      />
    </div>
)
}

ps。您不必一定在示例中使用bind。而且我不确定您可以将onChange事件应用于表单

debouncejavascriptreactjsreactjsreactjsreactjs