如何解决React 联系表单问题电子邮件 js
const [name,setName] = useState('');
const [email,setEmail] = useState('');
const [number,setNumber] = useState('');
const [message,setMessage] = useState('');
const service_id = 'xxxxx'
const template_id = 'xxxxx'
const user_id = 'xxxxx'
const orderDetails = {
name: name,email: email,phone: number,message: message
}
const sendEmail = () => {
emailjs.send(service_id,template_id,orderDetails,user_id);
}
<form className="contactusinfo__form" >
<input type="text" placeholder='Your Name' required onChange={(e) => setName(e.target.value)} />
<input type="email" placeholder='Your E-mail' required onChange={(e) => setEmail(e.target.value)} />
<input type="number" placeholder='Your Number' required onChange={(e) => setNumber(e.target.value)} />
<textarea name="message" placeholder='Your Message' id="" cols="30" rows="5" required onChange={(e) => setMessage(e.target.value)} ></textarea>
<button style={{ fontSize: '16px',fontFamily: 'Lato' }} type='submit' onClick={sendEmail()}>
SEND
</button>
</form>
我正在尝试使用 emailjs 从联系表单发送电子邮件，但遇到了错误。我早些时候工作正常，但现在我不知道我改变了什么。我的问题是电子邮件与文本区域中的事件更改量同步。
处理我的联系表单的最佳做法是什么？
解决方法
删除按钮上的 onClick 道具并在表单上添加 onSubmit 道具以触发 sendEmail 功能，或删除表单。
如果您想点击按钮发送电子邮件，您应该将 const DrawerNavigator = () => {
const [progress,setProgress] = useState<Node<number>>(new Value(0));
const scale = Animated.interpolate(progress,{
inputRange: [0,1],outputRange: [1,0.8],});
const animatedStyle = { transform: [{ scale }] };
return (
<View style={styles.container}>
<Drawer.Navigator
drawerContent={(props) => {
// FIXME - settingProgress should not be done like this - this prompts big fat warning
setProgress(props.progress);
return <DrawerContent {...props} />;
}}>
<Drawer.Screen name={Screens.DRAWER_SCREENS}>
{(props) => <DrawerScreensStack {...props} style={animatedStyle} />}
</Drawer.Screen>
</Drawer.Navigator>
</View>
);
};
替换为 Warning: Cannot update a component from inside the function body of a different component.
in DrawerView (at DrawerView.tsx:215)
需要 e.preventDefault() 来防止表单提交（在您的情况下会重新加载页面）。
,所以我把它改成
const sendEmail = () => {
e.preventDefault();
emailjs.send(service_id,template_id,orderDetails,user_id);
}
这似乎解决了这个问题。当心扎克伯格...
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。