ReactJS实现用户输入提交后跳转新页面展示数据问题求助

你的代码存在几个关键问题：没有管理输入框状态、缺少表单提交事件处理、没有页面跳转逻辑，按以下步骤修改即可实现需求：

1. 完善输入框状态控制 #

引入useState钩子管理输入值，定义handleChange函数更新状态，让输入框成为受控组件。

2. 添加表单提交按钮与提交逻辑 #

给表单添加onSubmit事件，阻止默认表单提交行为，同时添加提交按钮，在提交时处理页面跳转。

3. 配置路由实现页面跳转与传参 #

使用react-router-dom实现路由跳转，创建欢迎页面组件接收用户名参数并展示。

完整代码示例 #

1. 安装依赖（未安装的话执行）

npm install react-router-dom

2. 姓名输入组件（NameInput.jsx）

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

export default function NameInput() {
  const [username, setUsername] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setUsername(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username.trim()) {
      navigate(`/welcome?name=${encodeURIComponent(username)}`);
    }
  };

  return (
    <div className="convo">
      <div className="popup">
        <p>Let's have a short introduction. Hi I am XX. What is your name? </p>
        <form onSubmit={handleSubmit}>
          <label htmlFor="username">Your Name:</label>
          <input 
            type="text" 
            id="username"
            name="name" 
            onChange={handleChange}
            value={username}
            placeholder="Type in your name" 
            maxlength="25" 
            required
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
  );
}

3. 欢迎页面组件（WelcomePage.jsx）

import { useLocation } from 'react-router-dom';

export default function WelcomePage() {
  const location = useLocation();
  const username = new URLSearchParams(location.search).get('name');

  return (
    <div>
      <h1>Hello {decodeURIComponent(username)}!</h1>
    </div>
  );
}

4. 路由配置（App.jsx）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NameInput from './NameInput';
import WelcomePage from './WelcomePage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<NameInput />} />
        <Route path="/welcome" element={<WelcomePage />} />
      </Routes>
    </Router>
  );
}

export default App;

关键修改点说明 #

• 用useState管理输入框的值，确保输入能正常响应
• 给表单添加onSubmit事件，通过useNavigate实现页面跳转
• 使用URL参数传递用户名，在欢迎页面解析并展示
• 给输入框添加required属性，确保用户输入内容后才能提交

内容的提问来源于stack exchange，提问作者baby-mochi