Reactjs 如何使用功能组件验证React中的电子邮件地址？

我正在做一个React项目，在这个项目中我有一个表格，我正试图用这个表格

验证电子邮件地址，但我不知道如何应用所有这些

我期望的是，在输入标记中，如果我键入mark，那么如果我转到另一个输入标记，它必须

在输入标签上方显示类似这样的消息，请输入有效的电子邮件地址

这是Form.js

import React from 'react';
import './Form.css';

const Form = () => {

    const validation = (email) => {
        const result = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return result.test(String(email).toLowerCase());
    }


    return (
        <div className='container'>
            <div className='row'>
                <div className='col-4'>
                    <div className='mainForm'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="exampleInputEmail1">Email address</label>
                                <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
                            </div>
                            <div className="form-group">
                                <label htmlFor="exampleInputPassword1">Password</label>
                                <input type="password" className="form-control" id="exampleInputPassword1" />
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Form

从“React”导入React；
导入“/Form.css”；
常数形式=（）=>{
常量验证=（电子邮件）=>{
常量结果=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]+-9].[a-zA Z]+}.]；
返回result.test（字符串（email.toLowerCase（））；
}
返回(
电子邮件地址
密码
提交
)
}
导出默认表单

我认为这些是所有JS代码库中的基本问题，您需要使用onChange、onBlur、On…等捕捉输入事件，并将这些事件绑定到react类，如

return <input type=”email” name=”email” value={this.state.email} 
    onChange={this.handleChange.bind(this)}/>

---

您好@Khairu Aqsara我尝试了您的代码，为什么如果我在输入标记上键入mark会显示任何错误，因为输入使用了onChange事件，如果您想在元素失去焦点时触发，则需要使用onBlur事件。您可以看到这一点，然后

handleChange(event){
   var email = event.target.value;
   // do what ever you want
   validation(email);
}