无法在react.js的表单输入框中输入文本

Question

我无法在我的标签框中键入，这让我感到难以置信的困惑，因为我试图使一个简单的用户名/密码注册表单将数据记录到数据库中，但是如果没有输入数据的能力，这是不可能的。我想知道是否可以得到一些帮助。

import axios from "axios";
import React, { useState } from "react";
export default function Home() {

const [user, setUser] = useState({
username: "",
password: "",
});
const { username, password} = user;
const onInputChange = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
};
const onSubmit = async (e) => {
e.preventDefault();
await axios.post("http://localhost:8080/user", user);

};
return (
<div className="container">
<div className="row">
<div className="col-md-6 offset-md-3 border rounded p-4 mt-2 shadow">
<h2 className="text-center m-4">Register User</h2>
<form onSubmit={(e) => onSubmit(e)}>
<div className="mb-3">
<label htmlFor="Username" className="form-label">
Username
</label>
<input
type={"text"}
className="form-control"
placeholder="Enter your username"
name="Username"
value={username}
onChange={(e) => onInputChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="Password" className="form-label">
Password
</label>
<input
type={"text"}
className="form-control"
placeholder="Enter your Password"
name="Password"
value={password}
onChange={(e) => onInputChange(e)}
/>
</div>
<button type="submit" className="btn btn-outline-primary">
Submit
</button>

</form>
</div>
</div>
</div>
);
}

我看了代码，但我只是难以置信的困惑，它看起来很好，我

Answer 1

这是因为您的输入中没有正确的名称。

用password代替Password，用username代替Username。它必须和你所在的州一样。