React组件点击按钮输出输入框数据至控制台，却随输入变化触发输出的问题

你的代码里按钮的onClick写法有问题——直接写console.log(text)会导致这个语句在组件每次渲染时都执行（包括输入框内容变化触发的重渲染），而不是仅在点击按钮时执行。

只需要把console.log(text)包裹在一个箭头函数里，让onClick指向这个函数，这样只有点击按钮时才会调用它：

function Text() {
  const [text, setText] = useState("");
  return (
    <div className="white">
      {/* 我需要捕获信息的输入框 */}
      <input type="text" placeholder="enter" onChange={(e) => setText(e.target.value)} />
      <button onClick={() => console.log(text)}>CLICK</button>

      <div>{text}</div>
    </div>
  );
}

这样修改后，只有点击按钮时，输入框的内容才会输出到控制台，输入框内容变化时不会触发输出。

内容的提问来源于stack exchange，提问作者vitaliy125