无法在表单中输入输入字段（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="name@example.com"
                />
              </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 => onChange

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="name@example.com"/>
  </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。