React Hooks如何获取input值并在点击按钮后打印输出

问题根因 #

• 你当前直接将实时响应输入的input状态绑定到了页面展示的<h1>标签，所以每输入一个字符都会同步更新页面展示内容
• React 按钮点击事件语法错误：React 内联事件采用驼峰命名，正确写法为onClick，你当前写的onclick属于原生DOM写法，在React中不会生效，且你直接写console.log(input)会导致组件渲染时就直接执行打印逻辑，而非点击时触发
• 缺少单独存储提交后展示内容的状态

修复后的完整代码 #

/*Import*/
import React, { useState } from "react";
import "./Search.scss";
/*Component*/
const Search = () => {
  /*State*/
  const [input, setInput] = useState("");
  // 新增状态存储点击搜索后要展示的内容
  const [searchQuery, setSearchQuery = useState("");
  /*搜索按钮点击逻辑*/
  const handleSearch = () => {
    setSearchQuery(input);
    console.log(input);
  }

  return (
    <>
      <div className="Search">
        <form onSubmit={(e) => {
          e.preventDefault();
          // 绑定提交逻辑后支持按回车提交搜索
          handleSearch();
        }} className="Search__form">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            type="text"
            placeholder="&#xF002; Title, companies, expertise, or benefits"
            style={{ fontFamily: "Arial, FontAwesome" }}
          ></input>
          {/* 修复点击事件语法 */}
          <button onClick={handleSearch}>Search</button>
        </form>
        {/* 绑定提交后要展示的状态 */}
        <h1>{searchQuery}</h1>
      </div>
    </>
  );
};

/*Exporting*/
export default Search;

核心修改点 #

• 新增searchQuery状态专门用来存储点击搜索按钮后需要展示的内容，和实时输入的input状态做隔离，避免输入时实时更新展示
• 修正按钮点击事件写法为React标准的驼峰onClick，将搜索逻辑封装到独立的handleSearch函数中，点击时才会执行打印和更新展示内容的逻辑
• 页面展示的<h1>标签绑定searchQuery状态，仅在点击搜索按钮后才会更新显示内容
• 把搜索逻辑同步绑定到表单的onSubmit回调中，支持用户输入完成后按回车提交，符合常规表单使用体验更友好

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