如何解决使用 React-app 中的 Mailchimp API 订阅复选框
我正在尝试为我的 React 应用自定义表单实现订阅复选框。所以我的表单已经使用 FormSubmit 向电子邮件地址提交了一封电子邮件,所以我试图让该复选框和提交按钮也可以用于订阅 mailchimp 电子邮件受众。
现在我不知道我是否可以在组件中正确地做到这一点,但这是我拥有的组件的代码:它没有将电子邮件和姓名发送给 mailchimp 受众。启动反应服务器时没有错误
import React,{ useState } from 'react';
import './styles.contactform.css';
import mailchimp from "@mailchimp/mailchimp_marketing";
function ContactForm() {
const [name,setName] = useState('');
const [email,setEmail] = useState('');
const [message,setMessage] = useState('');
const [isChecked,setIsChecked] = useState(false);
mailchimp.setConfig({
apiKey: process.env.REACT_APP_MAILCHIMP_KEY,server: process.env.REACT_APP_MAILCHIMP_SERVER,});
const listId = process.env.REACT_APP_LISTID;
const subscribingUser = {
fullName: name,status: null,email: email
};
function subscribed(){
if (isChecked === true){
subscribingUser.status = "subscribed"
}else {
subscribingUser.status = "unsubscribed"
}
};
function run() {
subscribed()
mailchimp.lists.addListMember(listId,{
email_address: subscribingUser.email,status: subscribingUser.status,FNAME: subscribingUser.fullName,}).then((response) => {
console.log(
`Successfully added contact as an audience member.
The contact's id is ${response.id}.`
);
}).catch((err) => console.log(err))
} ;
const handleSubmit = (e) => {
run(e)
console.log(name,email,message)
};
return (
<div className="contact-container">
<form className="contact-form" action={process.env.REACT_APP_FORMSUBMIT} method="POST">
<input type="hidden" name="_next" value={process.env.REACT_APP_FORMEMAIL}/>
<input type="text" value={name} id="name" name="name" placeholder="Name..." onChange={(e) => setName(e.target.value)} required/>
<input type="email" value={email} id="email" name="email" placeholder="Email..." onChange={(e) => setEmail(e.target.value)} required/>
<img className="letter-img" src="contact_form_imagepng.png" alt="Mail Letter"/>
<input id="message" value={message} name="message" placeholder="Your message..." onChange={(e) => setMessage(e.target.value)}/>
<div className="sub-box">
<input id="subscribe" type="checkbox" className="checkbox" checked={isChecked} onChange= {(e) => setIsChecked(e.currentTarget.checked)} />
<span className="checkmark" onClick={() => setIsChecked(!isChecked)}></span>
<label className="sub-label" for="subscribe">Subscribe to email list</label>
</div>
<button type="submit" value="Submit" onSubmit={handleSubmit}>Submit</button>
</form>
</div>
);
}
export default ContactForm;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。