Reactjs 如何只调用e.target.value一次？

如何只调用e.target.value一次？ 如果您不希望event.target.value触发每个字符，但在用户停止键入时仅触发一次，该怎么办

  const [text, setText] = useState(null);

  const handleChange = (e) => { // 5 calls (5 characters)
    let resultText = e.target.value;
    setText(resultText);
  };
  return (
    <div className="App">
      <p>{text}</p>
      <input onChange={handleChange} /> // "react" 5 characters
    </div>
  );

const[text，setText]=useState（null）；
常量handleChange=（e）=>{//5个调用（5个字符）
设resultText=e.target.value；
setText（resultText）；
};
返回(
{text}

//“反应”5个字符
);

您需要解除事件处理程序的触发，以防止它被多次触发。 您可以使用。此函数将确保仅在特定时间段后调用您的事件，即使它被多次触发

import debounce from 'lodash.debounce';

export function MyComponent() {
  const [text, setText] = useState(null);

  // debounced event handler that is only called again
  // after its first call after 1 second
  const debouncedHandler = useCallback(
    debounce((e) => {
      let resultText = e.target.value;
      setText(resultText);
    }, 1000),
    []
  );

  return (
    <div className="App">
      <p>{text}</p>
      <input onChange={debouncedHandler} />
    </div>
  );
}

从“lodash.debounce”导入去盎司；
导出函数MyComponent（）{
const[text，setText]=useState（null）；
//仅再次调用的取消公告事件处理程序
//第一次呼叫后1秒钟
const debouncedHandler=useCallback(
去盎司（（e）=>{
设resultText=e.target.value；
setText（resultText）；
}, 1000),
[]
);
返回(
{text}

);
}

您可能正在寻找一个去盎司函数。这个库有一个非常好的，或者您可以自己实现它。它会延迟调用处理程序，直到上次调用取消公告函数后等待毫秒之后。它的意思是，您可以设置1秒钟的延迟，并且您的处理程序只会在用户停止键入后1秒钟被触发

const handleChange = useCallback(_.debounce((e) => {
    let resultText = e.target.value;
    setText(resultText);
  }, 1000), []);

---

另一方面，如果用户在停止之前看不到他们正在键入的内容，这可能会很烦人。

因此为了解决您的问题，我使用了if检查来查看文本状态是否有1个字符。一旦保存了一个字符，它就会停止向e.target.value和状态添加其他字符

    import React, { useState } from "react";
    import "./styles.css";
    
    export default function App() {
      const [text, setText] = useState("");
    
      const handleChange = (e) => {
   // 5 calls (5 characters)
   // Checks the length of the string if it is below 5 it will add it to the state
        if (text.length < 5) {
          let resultText = e.target.value;
          setText(resultText);
        }
      };
    
      return (
        <div className="App">
          <p>{text}</p>
          <input onChange={handleChange} /> // "react" 5 characters
        </div>
      );
    }

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[text，setText]=useState（“”）；
常数handleChange=（e）=>{
//5次通话（5个字符）
//检查字符串的长度，如果长度小于5，则将其添加到状态
如果（文本长度<5）{
设resultText=e.target.value；
setText（resultText）；
}
};
返回(
{text}

//“反应”5个字符
);
}

您如何检测用户是否完成了输入？查找去盎司功能或创建某种计时器，每次按键时重新启动，完成后触发另一个功能