如何让我的输入一次全部显示而不是一个一个地显示

Question

所以我正在运行一个字符串反转函数。我有一个输入，控制台会反向记录输入到输入中的所有内容，但现在我的问题是，当文本被控制台输出时，它会一一显示字母，我不希望这样。我希望它一次性返回所有字母作为一个单词。这就是我的代码的样子。

function Reduxy() {
    const reverse = (str) => {
        let reversedString = '';
        setTimeout(() => {
            for(var i = str.length-1; i >= 0; i--){
                reversedString+=str[i];
            }
            console.log(`Reversed string ${reversedString}`);
        }, 2000);
    }
  return (
    <div>
        <input type="text" placeholder='type word' onChange={e => reverse(e.target.value)} />
        {/* <button onClick={}>Submit</button> */}
    </div>
  )
}

export default Reduxy

我哪里可能出错了？

Answer 1

当前在您键入值时将值写入控制台，因为此处的每次更改都会调用

onChange

事件。

基于上面的此评论，听起来您并不打算响应某些未来事件，而是要实现一个 2 秒的 de-bounce 窗口，其中仅当满足以下条件时，该值才会记录到控制台：用户已输入内容并停止输入 2 秒。

在 React 中，我会结合使用

useState

和

useEffect

来完成此操作。首先，您将值保留在状态中，所有输入所做的就是更新该状态。每个状态更新都会重新渲染组件，

useEffect

将通过创建 2 秒超时来显示值并在组件重新渲染时取消该超时来利用这一点。

例如：

import { useState, useEffect } from "react";

function Reduxy() {
  // State to store the value
  const [myValue, setMyValue] = useState("");

  useEffect(() => {
    // Ignore the initial state
    if (myValue !== "") {
      // Set a timeout to display the reversed value
      const timeout = setTimeout(() => {
        reverse(myValue);
      }, 2000);

      // Cancel that timeout when the component unmounts
      return () => clearTimeout(timeout);
    }
  }, [myValue]);

  // No changes were made to this function
  const reverse = (str) => {
    let reversedString = "";
    setTimeout(() => {
      for (var i = str.length - 1; i >= 0; i--) {
        reversedString += str[i];
      }
      console.log(`Reversed string ${reversedString}`);
    }, 2000);
  };

  // The input now only updates state
  return (
    <div>
      <input
        type="text"
        placeholder="type word"
        onChange={(e) => setMyValue(e.target.value)}
      />
    </div>
  );
}

export default Reduxy;