无法在表单(React.js-Bootstrap)中键入输入字段(无法在输入字段中输入任何值)

Question

我可以将光标放在上面，但无法在输入字段中输入键盘上的任何值。不过，其他一切都很好，表单也提交了(考虑到空数据，因为我无法在其中键入(，可以做些什么来解决这个问题？

我有四个字段：全名，电话号码、电子邮件地址和消息。

import React, { useState } from "react";
import emailjs from "emailjs-com";
const Contact = () => {
const [data, setData] = useState({
fullname: "",
phone: "",
email: "",
mesge: "",
});
const InputEvent = (event) => {
const { name, value } = event.target;
setData((preVal) => {
return {
...preVal,
[name]: value,
};
});
};
const formSubmit = (e) => {
e.preventDefault();
emailjs
.sendForm(
"gmail",
"template_2eqdavu",
e.target,
"user_MPrsmYCTpYmxdtv6ZBwjH"
)
.then(
(result) => {
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
e.target.reset();
};
return (
<>
<div className="my-5">
<h1 className="text-center"> Contact us</h1>
</div>
<div className="container contact_div">
<div className="row">
<div className="col-md-6 col-10 mx-auto">
<form onSubmit={formSubmit}>
<div className="form-group">
<label for="exampleFormControlInput1">Full Name</label>
<input
type="text"
class="form-control"
id="exampleFormControlInput1"
name="fullname"
value={data.fullname}
onchange={InputEvent}
placeholder="Enter your full name"
/>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone Number</label>
<input
type="number"
class="form-control"
id="exampleFormControlInput1"
name="phone"
value={data.phone}
onchange={InputEvent}
placeholder="Enter your Phone number"
/>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input
type="number"
class="form-control"
id="exampleFormControlInput1"
name="email"
value={data.email}
onchange={InputEvent}
placeholder="[e-mail]"
/>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Message</label>
<input
type="number"
class="form-control"
id="exampleFormControlInput1"
name="mesge"
value={data.mesge}
onchange={InputEvent}
placeholder="mssg"
/>
</div>
<div class="col-12">
<button class="btn btn-outline-primary" type="submit">
Submit form
</button>
</div>
</form>
</div>
</div>
</div>
</>
);
};
export default Contact;

Answer 1

问题是属性名称不正确，请用以下内容更新您的代码。

已替换所有onchange=>on更改

import React, { useState } from "react";
import emailjs from 'emailjs-com';

const Contact = ()  => {

const [data, setData]=useState({
fullname:"",
phone:"",
email:"",
mesge:"",
});
const InputEvent = (event) => {
const {name, value} = event.target;
setData((preVal)=>{
return {
...preVal,
[name]: value,
};
});
};
const formSubmit = (e) =>{
e.preventDefault();
emailjs.sendForm('gmail', 'template_2eqdavu', e.target, 'user_MPrsmYCTpYmxdtv6ZBwjH')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset()
};
return (
<>
<div className = "my-5">
<h1 className="text-center"> Contact us</h1>
</div>
<div className = "container contact_div">
<div className = "row">
<div className = "col-md-6 col-10 mx-auto">
<form onSubmit ={formSubmit}>
<div className="form-group">
<label for="exampleFormControlInput1">Full Name</label>
<input type="text" class="form-control"
id="exampleFormControlInput1" name = "fullname" value={data.fullname} onChange={InputEvent} placeholder="Enter your full name"/>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone Number</label>
<input type="number" class="form-control"
id="exampleFormControlInput1" name = "phone" value={data.phone} onChange={InputEvent} placeholder="Enter your Phone number"/>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="number" class="form-control" 
id="exampleFormControlInput1" name = "email" value={data.email} onChange={InputEvent} placeholder="[e-mail]"/>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Message</label>
<input type="number" class="form-control" 
id="exampleFormControlInput1" name = "mesge" value={data.mesge} onChange={InputEvent} placeholder="mssg"/>
</div>


<div class="col-12">
<button class="btn btn-outline-primary" type="submit">Submit form</button>
</div>
</form>
</div>
</div>
</div>
</>

);
};
export default Contact;

Answer 2

在JSX中，元素属性与HTML属性不完全匹配，必须使用onChange而不是onchange。