我试图保护输入免受跨站点脚本的影响,并希望从联系表单上的输入中去除 html 标签,但没有任何运气。只是学习如何使用 useState 并且可以使用它发送电子邮件,但无法使用它去除标签。 Hese我有什么建议会有所帮助。先谢谢了
import { useState } from "react";
import emailjs from "emailjs-com";
import "./contact.scss"
export default function Contact() {
const [message, setMessage] = useState(false);
const [text, setText] = useState("");
const handleChange = () => {
if(text){
const str = document.getElementById('messageInput').value;
const result = str.replace(/<[^>]+>/g, '');
setText(result)
}
}
const handleSubmit = (e) =>{
e.preventDefault();
setMessage(true)
setText();
emailjs.sendForm('service_izsargb', 'template_ic3cvdc', e.target,
'user_5JvQDw83rSDoNGkk7WvO7').then(res=>{
console.log(res);
e.target.reset();
}).catch(err=>console.log(err));
}
return (
<div className="contact" id="contact">
<div className="left">
<img src="assets/shake.svg" alt="" />
</div>
<div className="right">
<h2>Contact</h2>
<form id="emailForm" onSubmit={handleSubmit}>
<input type="email" name="email" id="emailInput" placeholder="email" required/>
<textarea name="message" id="messageInput" cols="30" rows="10" placeholder="message" required ></textarea>
<button handleChange={handleChange}>Send</button>
<h1 id="messageOutput">{message && <span>Thank you for your message!</span>}</h1>
</form>
</div>
</div>
)
}