在 React.js 表单中进行所需的输入答案

【问题标题】：Making inputs required in a React.js form在 React.js 表单中进行所需的输入
【发布时间】：2020-10-06 23:37:39
【问题描述】：

在 React.js 中要求输入（姓名、电子邮件、内容等）的最佳（也是最简单）的方法是什么。我已经搜索了很长时间，但似乎有很多不同的不太明确的方法可以做到这一点。理想情况下，我希望输入 user_name、user_email 和 message 才能成功发送表单。任何帮助将不胜感激。

import React from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
import NavBar from "./NavBar";
import Footer from "./Footer";
import emailjs from 'emailjs-com';
import{ init } from 'emailjs-com';




 function Contact() {
     

    
  function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('hidden', 'hidden', e.target, 'hidden')
      .then((result) => {
        alert("Great, your request has been sent!"); 
        
      }, (error) => {
        alert("Oops, something went wrong. Please try again")
      });
      e.target.reset();
  }

  return (
     <div>
        <NavBar />
        <br />
        <br />
        <br />
        <br />
        <br />
        <MDBContainer>
          <MDBRow className = "formcontainer">
            <MDBCol md="6">
              <form onSubmit={sendEmail}>
                <p className="h4 text-center mb-4">Fill in the information below to contact me!</p>
                <br />
                <label htmlFor="defaultFormContactNameEx" className="grey-text" > Your name </label>
                <input type="text" id="defaultFormContactNameEx" className="form-control" name="user_name" />
                <br />


                <label htmlFor="defaultFormContactEmailEx" className="grey-text"> Your email </label>
                <input type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>
                <br />


                <label htmlFor="defaultFormContactSubjectEx" className="grey-text"> Subject</label>
                <input type="text" id="defaultFormContactSubjectEx" className="form-control" name="user_subject" />
                <br />


                <label htmlFor="defaultFormContactMessageEx" className="grey-text"> Your message </label>
                <textarea type="text" id="defaultFormContactMessageEx" className="form-control" rows="7" name="message"/>
                <div className="text-center mt-4">
                          <MDBBtn color="warning" outline type="submit">
                            Send
                            <MDBIcon far icon="paper-plane" className="ml-2" />
                          </MDBBtn>
                        </div>
                      </form>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
                <br />
                <br />
                <Footer />
                </div>
              );
            };



export default Contact;

【问题讨论】：

标签： reactjs forms input

【解决方案1】：

更简单的方法是在每个表单元素中使用required 属性。

即：

<input required type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>

你也可以在提交表单时检查所有输入是否为空

有关必需属性here的更多信息

【讨论】：

哇，我现在觉得很傻。哈哈它奏效了，我把它弄得比它需要的复杂得多！非常感谢！
解决方案在我们眼前而我们看不到是很正常的，所以没关系哈哈。请记住我评论的最后一部分，因为用户可以检查元素并从输入中删除所需的属性。无论如何也应该在后端检查所有内容
哈，是的，在过去的几个月里，我确实注意到了很多！太好了，明白了，再次感谢！