Javascript 使用挂钩处理更改的react表单的目标值为null

我正在努力学习

react hooks

。这是一个注册表单，在将经典类组件与内部状态和受控表单一起使用时效果良好。但是当我尝试像这样使用

react hooks

并在输入上键入时，它将不会显示我正在键入的内容

我已经记录了该事件，并意识到问题可能是目标值为null。有人能给我解释一下为什么会这样吗

const SignUp = props => {
  const [displayName, setDisplayName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleChange = e => {
    console.log(e);
    const { name, value } = e.target;
    switch (name) {
      case name === "displayName":
        setDisplayName(value);
      case name === "email":
        setEmail(value);
      case name === "password":
        setPassword(value);
      case name === "confirmPassword":
        setConfirmPassword(value);
    }
  };
  const handleSubmit = async e => {
    console.log(e);
    e.preventDefault();
    if (password !== confirmPassword) {
      alert("passwords do not match");
      return;
    }
    const { signUpStart } = props;
    signUpStart({ email, password, displayName });
  };

  return (
    <div className="sign-up-section">
      <form onSubmit={handleSubmit}>
        <FormInput
          type="text"
          name="displayName"
          handleChange={handleChange}
          value={displayName}
          label="display name"
        />
        <FormInput
          type="email"
          required
          name="email"
          value={email}
          handleChange={handleChange}
          label="email"
        />
        <FormInput
          type="password"
          name="password"
          handleChange={handleChange}
          value={password}
          label="password"
        />
        <FormInput
          type="psssword"
          name="confirmPassword"
          handleChange={handleChange}
          value={confirmPassword}
          label="comfirmPassword"
        />
        <Button type="submit" name="password" label="SIGN" />
      </form>
    </div>
  );
};


const FormInput =({label,handleChange, ...otherProps})=>{
    return <div className='group'>
        <input {...otherProps} onChange={handleChange} className='form-input'/>
        {
            label?(<label className={`${otherProps.value.length? 'shrink':''} form-input-label` }>{label}</label>):null
        }
    </div>
}

const SignUp=props=>{
const[displayName，setDisplayName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[confirmPassword，setConfirmPassword]=useState（“”）；
常量handleChange=e=>{
控制台日志（e）；
常量{name，value}=e.target；
交换机（名称）{
案例名称==“displayName”：
setDisplayName（值）；
案例名称==“电子邮件”：
设置电子邮件（值）；
案例名称=“密码”：
设置密码（值）；
案例名称==“确认密码”：
setConfirmPassword（值）；
}
};
const handleSubmit=async e=>{
控制台日志（e）；
e、 预防默认值（）；
如果（密码！==确认密码）{
警报（“密码不匹配”）；
返回；
}
const{signUpStart}=props；
signUpStart（{email，password，displayName}）；
};
返回(
);
};
常量FormInput=（{label，handleChange，…otherProps}）=>{
返回
{
标签？（{label}）：空
}
}

您希望为输入字段的每个更改设置state，因此只要输入字段发生更改，就会调用onChange回调函数

对于回调函数，开关的情况应该如下所示：

    switch(cond){
    case 'cond1':
                 execute;
                 break;
    }

---

您是否尝试过改用

e.currentTarget

const { name, value } = e.currentTarget;

这将确保获得事件侦听器所附加的元素

---

请参阅：

正如您在下面看到的，问题不在于

e.target

为null或未定义。问题实际上在switch语句中

您在这里混合了

开关

和

if-else

的语法。开关自动执行

名称==

部分。在你的例子中，你需要做的就是把

名称

应该等于什么-而不是整个表达式

如下图所示进行更改，在状态更新后使用正确的

大小写

，并使用

中断

const{useState，useffect}=React；
const SignUp=props=>{
const[displayName，setDisplayName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[confirmPassword，setConfirmPassword]=useState（“”）；
常量handleChange=e=>{
console.log（e.target.name）；//正确记录
console.log（e.target.value）；//正确记录
常量{name，value}=e.target；
交换机（名称）{
案例“displayName”：
setDisplayName（值）；
打破
案例“电子邮件”：
设置电子邮件（值）；
打破
案例“密码”：
设置密码（值）；
打破
案例“确认密码”：
setConfirmPassword（值）；
打破
}
};
常量handleSubmit=e=>{
控制台日志（e）；
e、 预防默认值（）；
如果（密码！==确认密码）{
警报（“密码不匹配”）；
返回；
}
const{signUpStart}=props；
//signUpStart（{email，password，displayName}）；
};
返回(
签名
);
};
常量FormInput=（{label，handleChange，…otherProps}）=>{
返回(
{标签？
{label}
：null}
);
}
ReactDOM.render（，document.getElementById（'root'））

switch语句是在我记录事件并发现e.target为null之后出现的。你知道为什么e.target是空的，但当我切换到class component时不是空的吗？e.target不是空的，打开链接，继续键入任何输入标记，然后打开控制台进行验证。什么是
FormInput
？它来自库吗？它是一个自定义输入组件。注册组件将事件处理程序传递给它，如您所示<应该定义code>e.target

，但是自定义输入可能会对其产生影响。我已经编辑了这个问题以包含自定义输入wow。谢谢你，伙计。我的头撞在墙上。我就是不明白为什么它不起作用。使用switch语句似乎可以解决问题，但感谢您提供的资源。