React.js实现点击按钮后展示输入框值的问题求助

你当前的问题是输入框的onChange事件直接修改了用于展示的userBalance状态，所以输入时页面会实时更新。要实现点击按钮才展示，需要把输入的临时值和最终展示的值分开管理。

修改后的代码如下：

import React from "react";
import { useState } from "react";

export default function BalanceInput() {
  // 存储最终要展示的余额
  const [userBalance, setUserBalance] = useState(0);
  // 存储用户输入的临时内容
  const [inputValue, setInputValue] = useState("");

  // 点击按钮时，把临时输入值赋值给展示状态
  function displayBalance() {
    setUserBalance(inputValue);
  }

  return (
    <div>
      {/* React中label的for要写成htmlFor，避免和JS关键字冲突 */}
      <label htmlFor="balanceInput">Enter Bank Balance: </label>
      <input
        type="text"
        onChange={(event) => setInputValue(event.target.value)}
        id="balanceInput"
        placeholder="Enter balance here"
        value={inputValue}
      />

      <h3>Current Balance: {userBalance}</h3>
      <button onClick={displayBalance}>Balance</button>
    </div>
  );
}

关键修改说明：

• 新增inputValue状态专门存用户输入的临时内容，输入时只更新这个状态，不会触发展示区域的变化
• 点击Balance按钮时，displayBalance函数把inputValue的值同步到userBalance，此时展示区域才会更新
• 把输入框的defaultValue改成value={inputValue}，让输入框和inputValue状态双向绑定
• 修正了label的for为htmlFor，这是React的规范写法，避免语法冲突

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