在React中将axios用于Register形式.onSubmit按钮未被读取.onChange按钮未被读取

Question

我正在建立我的第一个电子商务网站。我正在尝试使用axios get调用my mongodb数据库来设置一个带有react的注册/登录/注销表单。设置表单提交的输入值时遇到问题。我很确定我没有正确设置手柄更改功能。我认为引入用户数据并销毁它会更容易，但我不确定如何实现扩散运算符。

const RegisterScreen = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');


const handleChange  = (e) => {
console.log(name);
setName (e.target.name);
console.log(email);
setEmail(e.target.email);
setPassword(e.target.password)
console.log(password);
}
'''<div>
<h1>Create Account</h1>
<label htmlFor="name">Name</label>
<input
type="text"
id="name"
value={name}
placeholder="Enter name"
required
onChange={handleChange}
></input>
</div>

Answer 1

"onChange"引用单个输入(e.target是您的输入(。您的输入有一个name和一个value。例如，您的输入中没有email。

您必须获得输入的value，而不是电子邮件(不存在(。

因此，一个工作示例如下：

const RegisterScreen = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');


const handleChange  = (e) => {
if (e.target.name === "name") {
setName (e.target.value);
} else if (e.target.name === "email") {
setEmail(e.target.value);
} else 
setPassword(e.target.value)
}
}

或者更好：

const RegisterScreen = () => {
const [data, setData] = useState({});
const handleChange  = (e) => {
const newData = {...data}
newData[e.target.name] = e.target.value
setData(newData)
}
}

一个工作组件将是：

import React, { useState } from 'react'
const RegisterScreen = () => {
const [data, setData] = useState({});
const handleChange  = (e) => {
const newData = {...data}
newData[e.target.name] = e.target.value
setData(newData)
}
return (
<div>
<h1>Create Account</h1>
<label htmlFor="name">Name</label>
<input
type="text"
name="name"
value={data.name}
placeholder="Enter name"
required
onChange={handleChange}
></input>
<input
type="password"
name='password'
value={data.password}
placeholder="Enter password"
required
onChange={handleChange}
></input>
<input
type="email"
name='email'
value={data.email}
placeholder="Enter email"
required
onChange={handleChange}
></input>
<div>
<ul>
<li>
name: {data.name}
</li>
<li>
password: {data.password}
</li>
<li>
email: {data.email}
</li>
</ul>
</div>
</div>
)
}
export default RegisterScreen

上的应用程序已完全工作https://github.com/afoone/stackoverflow_answer_-70325367