使用React Hooks与受控组件时输入框键入文本无法显示如何解决

核心问题点 #

• 受控组件属性冲突：第一个姓名输入框同时声明了value和defaultValue属性，React 受控组件仅需绑定value属性与状态关联，同时设置两个值属性会导致渲染逻辑异常。
• 字段映射不匹配：state 中定义的字段键名为name、email、password、reenterPassword，但 input 标签的name属性设置为Username、Email、Password、ReEnterPassword，二者命名、大小写均不匹配。你在更新 state 时用[name]动态作为键，实际是往 state 里新增了四个不在原有定义中的字段，原本绑定到 input 的user.name等属性始终是空值，因此浏览器看不到输入内容。

修正代码 #

import React, { useState } from "react";

const Register = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
    reenterPassword: ""
  });

  const changeHandler = (e) => {
    const { name, value } = e.target;
    setUser({
      ...user,
      [name]: value
    });
  };

  return (
    <div className="register">
      <h1>Register</h1>
      <input 
        onChange={changeHandler}  
        name="name" 
        placeholder="Please Enter Your Name" 
        type="text" 
        value={user.name}
      />
      <input 
        onChange={changeHandler} 
        name="email" 
        placeholder="Enter your Email" 
        type="email" 
        value={user.email}
      />
      <input 
        onChange={changeHandler} 
        name="password" 
        placeholder="Create Your Password" 
        type="password" 
        value={user.password}
      />
      <input 
        onChange={changeHandler} 
        name="reenterPassword" 
        placeholder="Re-Enter Your Password" 
        type="password" 
        value={user.reenterPassword}
      />
      <div className="button">Register</div>
      <div>OR</div>
      <div className="button">Login</div>
    </div>
  );
}
export default Register;

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