React表单提交后用户名消息不显示问题求助

架构老林

2026-6-18

问题解决方法

你的代码存在两个核心问题导致功能失效：

提交按钮未指定type="submit"
React Bootstrap的Button组件默认类型是button，无法触发表单的onSubmit事件。必须显式设置type="submit"，点击按钮时才会执行提交逻辑。
状态存储方式不够合理（可选优化）
你直接将JSX元素存在message状态中，这并非React状态的最佳使用方式。建议存储用户名字符串，渲染时再生成对应的JSX结构，让状态更纯粹、易维护。

另外，onChange回调里的console.log(username)会打印旧值——因为useState的状态更新是异步的，若需要查看最新值，可直接使用event.target.value，或通过useEffect监听状态变化。

修复后的完整代码：

import './App.css';
import { Button, Container, Form } from 'react-bootstrap';
import { useState } from 'react';

function App() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [message, setMessage] = useState('')

  function handleSubmit(event) {
    event.preventDefault();
    setMessage(username)
  }

  return (
    <Container>
      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Label>Username</Form.Label>
          <Form.Control 
            value={username} 
            onChange={(event) => setUsername(event.target.value)} 
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Password</Form.Label>
          <Form.Control 
            value={password} 
            onChange={(event) => setPassword(event.target.value)} 
          />
        </Form.Group>
        <Button className='mt-3' type="submit">Submit</Button>
      </Form>
      {message && <h1>{message}</h1>}
    </Container>
  )
}

export default App;