在 React hooks 中获取输入值并打印

Question

我正在尝试在屏幕上打印输入值，但每次输入新字符时它都会不断更新。

/*Import*/
import React, { useState } from "react";
import "./Search.scss";
/*Component*/
const Search = () => {
  /*State*/
  const [input, setInput] = useState("");
  /*On Form Submit*/

  return (
    <>
      <div className="Search">
        <form onSubmit={(e) => e.preventDefault()} 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={console.log(input)}>Search</button>
        </form>
        <h1>{input}</h1>
      </div>
    </>
  );
};

/*Exprting*/
export default Search;

我只想在单击按钮后打印整个值

Answer 1

您在每次重新呈现时调用 console.log(input)，而不是仅在单击时调用。将其转换为箭头函数，它应该可以执行您想要的操作。

<button onClick={()=>console.log(input)}>Search</button>

编辑：回答您的后续问题：您需要两个独立的状态变量：

/*Import*/
import React, { useState } from "react";
import "./Search.scss";
/*Component*/
const Search = () => {
  /*State*/
  const [input, setInput] = useState("");
  // new state variable
  const [submittedInput, setSubmittedInput] = useState("");
  /*On Form Submit*/

  return (
    <>
      <div className="Search">
        <form onSubmit={(e) => e.preventDefault()} 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={()=>setSubmittedInput(input)}>Search</button>
        </form>
        <h1>{submittedInput}</h1>
      </div>
    </>
  );
};

在 React hooks 中获取输入值并打印

Get the input value in React hooks and print it

javascript

input

reactjs