React.js + Bootstrap 表单输入框无法键入内容如何解决

问题修复方案 #

核心问题原因 #

你的表单无法输入是三个问题共同导致的：

• 事件绑定语法错误：React 内置事件属性为驼峰命名规范，你所有输入框写的onchange无法触发对应事件，输入操作不能更新 state，输入框绑定的 value 始终为空，所以看起来没法输入内容
• 输入框类型配置错误：邮箱、留言字段的type都设为了number，仅支持输入数字，无法正常输入文本内容
• 可选规范问题：React 中指定元素样式类需要用className属性，你写的原生class属性不会生效，也建议同步修正

具体修改点 #

1. 把所有输入框的onchange替换为onChange
2. 邮箱输入框的type="number"改为type="email"
3. 留言输入框的type="number"改为type="text"，如果需要支持多行输入可以换成textarea标签
4. 所有标签的class属性替换为className
5. 建议修改重复的 input id，保证每个 id 唯一，避免 label 点击聚焦异常

修正后完整代码 #

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);
        }
      );
    // 受控组件提交后直接重置state即可，无需手动重置表单
    setData({
      fullname: "",
      phone: "",
      email: "",
      mesge: "",
    })
  };
  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 htmlFor="fullname">Full Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="fullname"
                  name="fullname"
                  value={data.fullname}
                  onChange={InputEvent}
                  placeholder="Enter your full name"
                />
              </div>
              <div className="form-group">
                <label htmlFor="phone">Phone Number</label>
                <input
                  type="number"
                  className="form-control"
                  id="phone"
                  name="phone"
                  value={data.phone}
                  onChange={InputEvent}
                  placeholder="Enter your Phone number"
                />
              </div>
              <div className="form-group">
                <label htmlFor="email">Email address</label>
                <input
                  type="email"
                  className="form-control"
                  id="email"
                  name="email"
                  value={data.email}
                  onChange={InputEvent}
                  placeholder="name@example.com"
                />
              </div>

              <div className="form-group">
                <label htmlFor="mesge">Message</label>
                <textarea
                  className="form-control"
                  id="mesge"
                  name="mesge"
                  value={data.mesge}
                  onChange={InputEvent}
                  placeholder="Enter your message"
                  rows="4"
                />
              </div>

              <div className="col-12">
                <button className="btn btn-outline-primary" type="submit">
                  Submit form
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default Contact;

内容的提问来源于stack exchange，提问作者Benzenec6h6