@Chelovekvekvek

Как отправлять данные из полей форм?

Добрый день.

Мне нужно, чтобы с поп-ап формы отправлялись значения на почту через функцию (formDataProcessing), написанную на стороне (так работает сайт). Мне нужно передавать в неё значение из полей формы. Вопрос: Как это сделать? Форма отправляет, но поля не принимает, в письме приходит undefined.
Код компонента с формой:

import React from 'react';
import MaskedInput from 'react-maskedinput';

const FormEmail = (props) => {
    return(
        <div className="form-blank__wrap">
            <form className="form-blank" id="form-price2018">
                <MaskedInput  mask="+7(111) 111 11 11" type="text" placeholder={'Телефон*'} size={''} name="phone"
                              id="form-price2018__phone" required="true" className="form-blank__field"/>
                <input className="form-blank__field"
                       id="form-price2018__email" type="email" placeholder={'Email*'} name="email"/>
                <input className="btn" type="submit" value="ЗАБРОННИРОВАТЬ" 
                       onClick={formDataProcessing('Забронировать дом по цене 2018г', '', $('#form-price2018__phone').val(), $('#form-price2018__email').val() ,'','2018','yaTarget')}/>
            </form>
        </div>
    )
};

export default FormEmail;


Код компонента, где вызывается форма:

import React, { Component } from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {getIdeaSuccess} from "../../../actions/actions";
import Popup from '../../elements/popup/popup';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { formDataProcessing } from '../../elements/forms/form-email/form-email';


class Branding extends Component{

    constructor(props) {
        super(props);
        this.state = {
            popupGetIdea: false,
            popupKnow: false
        };
    }



    sendPopupKnow () {
        this.setState({formDataProcessing: true});
        this.props.getIdeaSuccess(true);
    }

    openPopupGetIdea() {
        this.setState({popupGetIdea: true});
        yaCounter21935674.reachGoal('zabronirovat-dom-form');
    }
    closePopupGetIdea() {
        this.setState({popupGetIdea: false});
        this.props.getIdeaSuccess(false);
    }

    openPopupKnow() {
        this.setState({popupKnow: true});
    }
    closePopupKnow() {
        this.setState({popupKnow: false});
    }

    render() {
        return(
            <section className="branding">
                <div className="container branding__wrap">
                    <div className="branding__item">
                        <div className="branding--logo">
                            <div className="branding--logo__item">
                                <h1 className="branding__title">
                                    КУПИ СЕЙЧАС,<br/>
                                    ПОСТРОЙ ВЕСНОЙ
                                </h1>
                            </div>
                            <div className="branding--logo__item">
                                <div className="square"></div>
                            </div>
                        </div>
                    </div>
                    <div className="branding__item">
                        <p className="branding__desc">
                            Всё дорожает... К сожалению, и мы не в силах сдерживать рост цен.
                        </p>
                        <p className="branding__desc">
                            В связи с повышением <span>НДС с 1 января 2019 г.,</span> повышаются цены на стройматериалы
                            на <span>15%.</span>
                        </p>
                    </div>
                </div>
                <div className="order">
                    <h2 className="order__title">
                        УСПЕЙТЕ ЗАБРОНИРОВАТЬ ДОМ<br/>
                        ИЗ КЛЕЁННОГО БРУСА <span>ПО ЦЕНАМ 2018 г.</span>
                    </h2>
                    <button className="branding__btn" onClick={this.openPopupGetIdea.bind(this)}>
                        <p>
                            <FontAwesomeIcon icon="check" />
                        </p>
                        <p>
                            ЗАБРОНИРОВАТЬ ДОМ ПО ЦЕНЕ 2018 г.
                        </p>
                    </button>
                    <p onClick={this.sendPopupKnow.bind(this)} className="order__link">
                        УЗНАТЬ ПОДРОБНЕЕ
                    </p>
                </div>
                <Popup
                    title={'Забронировать дом по цене 2018г'}
                    area={'popup-form'}
                    state={this.state.popupGetIdea}
                    close={this.closePopupGetIdea.bind(this)}
                    type={'email'}
                    notification={this.props.isNotification}
                    formClick={this.sendPopupKnow.bind(this)}
                />
                <Popup
                    state={this.state.popupKnow}
                    area={'popup-form form-branding'}
                    close={this.closePopupKnow.bind(this)}
                    type={'know'}
                    notification={this.props.isNotification}
                />
            </section>
                )
    }
}


export function mapStateToProps(store) {
    return {
        isNotification: store.mainReducer.isGetIdeaNotification
    }
}

export const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({getIdeaSuccess}, dispatch)
};

export default connect(mapStateToProps, mapDispatchToProps)(Branding);
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ответы на вопрос 1
alexiusp
@alexiusp
web и mobile разработчик
Что-то я не нашёл во втором компоненте ни импорта формы, ни её использования. Я вижу только импорт formDataProcessing, объявления которого в первом файле нет. Удивительно, как этот код вообще компилируется?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Indacoin Москва
от 80 000 до 160 000 руб.
Acme Crypto Corp Нижний Новгород
от 120 000 до 200 000 руб.
22 марта 2019, в 06:30
10000 руб./за проект
22 марта 2019, в 03:12
20000 руб./за проект
22 марта 2019, в 00:24
10000 руб./за проект