如何修改React表单代码，实现提交后才渲染问候H1？

当前代码的问题在于直接用输入框绑定的input状态做条件渲染，导致输入时就实时更新标题。要实现提交后才显示包含输入内容的Hello标题，只需做以下两处修改：

• 修改条件渲染的判断逻辑：把基于input的判断换成基于newSubmitInput（专门存储提交后内容的状态）
• 完善提交处理函数，在提交时将输入框的值同步到newSubmitInput

修改后的完整代码 #

import './App.css';
import React, { useState } from "react"

function App() {
  const [input, setInput] = useState('')
  const [newSubmitInput, setSubmitInput] = useState('')

  function clickHandle(e) {
    e.preventDefault();
    // 提交时将输入框内容存入newSubmitInput
    setSubmitInput(input);
    // 可选：提交后清空输入框，提升用户体验
    setInput('');
  }

  return (
    <div className="container">
      {/* 仅在提交后（newSubmitInput有值时）显示带内容的Hello标题 */}
      {newSubmitInput ? <h1>Hello {newSubmitInput}</h1> : <h1>Type an input</h1>}
      <form onSubmit={clickHandle}>
        <input 
          id="nameInput" 
          type="text" 
          placeholder='Whats Your Name?' 
          value={input} 
          onChange={e => setInput(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

核心逻辑说明 #

输入框依然通过input状态实时同步用户输入，但标题的渲染仅依赖newSubmitInput状态——只有当用户点击提交按钮时，newSubmitInput才会被赋值，从而触发标题的条件渲染更新。提交后清空输入框是可选优化，不需要的话可以删除setInput('')这一行。

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