React表单部分输入框无法输入问题求助

你的firstname、lastname、username输入框无法输入的核心原因是：这些属于受控组件，但未绑定onChange事件同步更新对应状态。React中受控组件的值由state驱动，没有onChange的话，state不会随用户输入更新，输入框会一直保持初始空值，表现为无法输入。

同时还存在两个小问题：

• 给输入框添加了自定义属性（如firstname="firstname"），应替换为标准的name属性（符合表单规范，也方便后续批量处理表单）
• 缺少type="text"属性，虽浏览器会默认识别为文本输入，但明确指定更规范

修改后的关键代码片段 #

// First Name输入框
<input 
  type="text"
  value={firstname} 
  onChange={(e) => setfirstName(e.target.value)}
  name="firstname" 
  id="firstname" 
  placeholder="First Name"
/>

// Last Name输入框
<input 
  type="text"
  value={lastname} 
  onChange={(e) => setlastName(e.target.value)}
  name="lastname" 
  id="lastname" 
  placeholder="Last Name"
/>

// Username输入框
<input 
  type="text"
  value={username} 
  onChange={(e) => setuserName(e.target.value)}
  name="username" 
  id="username" 
  placeholder="Username"
/>

完整修改后的组件代码 #

import React, { useState } from "react";
import { useNavigate} from 'react-router-dom';
import logo from'../logo.png';
import '../index.css';

export const Register = (props) => {
    const navigate = useNavigate();
    const login = () => {
        navigate('/Login');
    };
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');
    const [reppass, setrepPass] = useState('');
    const [firstname, setfirstName] = useState('');
    const [lastname, setlastName] = useState('');
    const [username, setuserName] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(email, firstname, lastname, username);
    }

    return (
        <div className="App">
        <div className="auth-form-container" style={{boxSizing: 'content-box', display: 'flex',  justifyContent:'center', alignItems:'center', position: 'relative', height: '100%', marginRight: '30rem', marginLeft: '30rem', marginTop: '50px', marginBottom: '50px'}}>
        <img src={logo} alt="VaporCode Logo"></img>
            <h2 style={{ color: 'white' }}>Register</h2>
        <form className="register-form" onSubmit={handleSubmit}>
            <label htmlFor="firstname" style={{ color: 'white' }}>First Name</label>
            <input 
              type="text"
              value={firstname} 
              onChange={(e) => setfirstName(e.target.value)}
              name="firstname" 
              id="firstname" 
              placeholder="First Name"
            />
        <label htmlFor="lastname" style={{ color: 'white' }}>Last Name</label>           
        <input 
          type="text"
          value={lastname} 
          onChange={(e) => setlastName(e.target.value)}
          name="lastname" 
          id="lastname" 
          placeholder="Last Name"
        />
        <label htmlFor="email" style={{ color: 'white' }}>Email</label>
            <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email" id="email" name="email" />
        <label htmlFor="username" style={{ color: 'white' }}>Username</label>
            <input 
              type="text"
              value={username} 
              onChange={(e) => setuserName(e.target.value)}
              name="username" 
              id="username" 
              placeholder="Username"
            />
            <label htmlFor="password" style={{ color: 'white' }}>Password</label>
            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
        <label htmlFor="repeatpassword" style={{ color: 'white' }}>Retype Password</label>
            <input value={reppass} onChange={(e) => setrepPass(e.target.value)} type="password" placeholder="Retype Password" id="repeatpassword" name="repeatpassword" />

            <button type="submit">Register</button>
        </form>
        <button className="link-btn" onClick={login}>Already have an account? Login here.</button>
    <div style={{ display: "flex", justifyContent: "center" }}>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR" width="294" height="48" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
    </div>
    )
}

export default Register;

额外说明：原代码中的<linkbutton>不是标准HTML标签，已替换为<button>，避免React将其识别为自定义组件引发渲染问题。

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