0

Помогите, намучалась с этим, не могу понять где ошибка, сто раз меняла все какое-то время на локал хосте работало, но на сервере нет. Сейчас нигде не работает. Меняла код очень много раз. Есть сверстанный компонент форма на React.

function Cantacts() {
const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

let changeName = (event) => setName(event.currentTarget.value);
let changeEmail = (event) => setEmail(event.currentTarget.value);
let changeMessage = (event) => setMessage(event.currentTarget.value);

const form = (e) => {
    e.preventDefault();
    axios.post("https://express-js2.herokuapp.com/submit", {
        name,
        email,
        message,
    })
        .then(() => {
            alert("Your message has been send");
        });
};

return (
    <div className={styles.block} id="Contacts">
        <Fade bottom>
            <div className={styles.wrapper}>
                <h2 className={styles.myCantact}>Напишите мне</h2>
                <div className={styles.line}></div>

                <form className={styles.form}>
                    <input type="text" placeholder="Name" onChange={changeName}/>
                    <input
                        type="text"
                        size="40px"
                        placeholder="Email"
                        onChange={changeEmail}
                    />
                    <textarea
                        rows="10"
                        cols="60"
                        onChange={changeMessage}
                        placeholder="Your message"
                    />
                </form>
                <button className={styles.send} onClick={form}>
                    Отправить
                </button>
            </div>
        </Fade>
    </div>
);

}

Express файл:

const app1 = express();
app1.use(bodyParser.urlencoded({ extended: false }));
app1.use(bodyParser.json());

app1.use(cors({
   origin: 'http://localhost:3000'
}))
let transporter = nodemailer.createTransport({
service: "gmail",
auth: {
    user: process.env.login, // generated ethereal user
    pass: process.env.password // generated ethereal password
  }
});



app1.post('/', function (req, res) {
res.send('Hello World!');
});
//create andpoint
app1.post('/submit', async function (req, res) {
let { name, email, message } = req.body;


await transporter.sendMail({
    from: 'Toma', // sender address
    to: "docsperj@gmail.com", // list of receivers
    subject: "HR", // Subject line
    // text: "Test gmail", // plain text body
    html: `<b>HR message</b>

<div>
name: ${name}
</div>
<div>
email:${email}
</div>
<div>
message:${message}
</div>`
});

res.send('Submited!');
});
const PORT = 'https://express-js2.herokuapp.com/'

app1.listen(PORT, function () {
console.log('Example app listening on port http://localhost:3000!');
});

1 ответ 1

0

process.env.port


const DEFAULT_VALUES={name:'',email:'',message:''}

function Cantacts() {
const [values, setValues] = React.useState(DEFAULT_VALUES);

const onChange = ({target}) => setValues(state=>({...state, [target.name]:target.value}));

const onSubmit = (e) => {
    e.preventDefault();
    axios.post("https://express-js2.herokuapp.com/submit", {
        name,
        email,
        message,
    })
        .then(() => {
            alert("Your message has been send");
        });
};

return (
    <div className={styles.block} id="Contacts">
        <Fade bottom>
            <div className={styles.wrapper}>
                <h2 className={styles.myCantact}>Напишите мне</h2>
                <div className={styles.line}></div>

                <form onSubmit={onSubmit} className={styles.form}>
                    <input 
                       type="text" 
                       name="name"
                       value={values.name}
                       placeholder="Name" 
                       onChange={onChange}
                    />
                    <input
                        type="text"
                        size="40px"
                        name="email"
                        value={values.email}
                        placeholder="Email"
                        onChange={onChange}
                    />
                    <textarea
                        rows="10"
                        cols="60"
                        name="message"
                        value={values.message}
                        onChange={onChange}
                        placeholder="Your message"
                    />
                    <button className={styles.send} >
                       Отправить
                    </button>
                </form>
            </div>
        </Fade>
    </div>);
}

Express файл:

const app1 = express();
app1.use(bodyParser.urlencoded({ extended: false }));
app1.use(bodyParser.json());

app1.use(cors({
   origin: 'http://localhost:3000'
}))
let transporter = nodemailer.createTransport({
service: "gmail",
auth: {
    user: process.env.login, // generated ethereal user
    pass: process.env.password // generated ethereal password
  }
});



app1.post('/', function (req, res) {
res.send('Hello World!');
});
//create andpoint
app1.post('/submit', async function (req, res) {
let { name, email, message } = req.body;


await transporter.sendMail({
    from: 'Toma', // sender address
    to: "docsperj@gmail.com", // list of receivers
    subject: "HR", // Subject line
    // text: "Test gmail", // plain text body
    html: `<b>HR message</b>

<div>
name: ${name}
</div>
<div>
email:${email}
</div>
<div>
message:${message}
</div>`
});

res.send('Submited!');
});
const PORT = process.env.port || 3000; // this line was changed

app1.listen(PORT, function () {
console.log('Example app listening on port http://localhost:3000!');
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.