Как отправлять сообщения-запросы на контактную форму 7 из React.js - PullRequest
0 голосов
/ 07 ноября 2019

В настоящее время я работаю над сайтом React, используя Wordpress в качестве бэкэнда. Мне удалось установить user authentication с помощью JWT , и сейчас я пытаюсь отправить запросы на публикацию в контактную форму 7, и у меня возникают проблемы с преобразованием тегов формы в json, но на самом деле это не такЯ знаю, с чего начать, и я не совсем уверен, что это правильный процесс.

Я использую axios для отправки запросов на сообщения, и веб-сайты все еще работают локально (я понимаю, что мог быу меня есть CORS проблем и проблем, связанных с отправкой формы по электронной почте, но я хочу, чтобы она достигла точки, в которой все данные отправляются правильно).

Ниже приведен код моего Компонент контакта .

Текущие ошибки: Ошибки консоли

React Geniuses Пожалуйста, помогите:) ....

import React, {Component} from 'react'
import axios from 'axios'

class Contact extends Component {
    constructor(props) {
        super(props) 
            this.state = {
                yourName: '',
                yourEmail: '',
                subject: '',
                message: '',
                successMessage:'',
                loading: false,
                error: ''
            }
    }

    onFormSubmit = (event) => {
        event.preventDefault()
        const siteURL = 'http://localhost/wordpress'
        const formData = {
            yourName: this.state.yourName,
            yourEmail: this.state.yourEmail,
            subject: this.state.subject,
            message: this.state.message
        }

        this.setState({ loading:true}, () => {
            axios.post(`${siteURL}/wp-json/contact-form-7/v1/contact-forms/92/feedback`, formData)
            .then( res => {
                this.setState({loading: false, successMessage: 'Yay your message was sent'})
                console.warn( res.data)
            })
            .catch( err => {
                           this.setState({ error: err.response.data, loading: false})
                       })
        })
    }

    handleOnChange = (event) => {
        event.preventDefault()
        this.setState({ [event.target.name]: event.target.value})
    }

    render() {
        const { yourName, yourEmail, subject, message, successMessage} = this.state
        return(
            <React.Fragment>
            <form onSubmit={this.onFormSubmit} style={{ margin: '20px'}}>
                <label className='form-group'>
                  Name:
                  <input 
                   type='text'
                   className="form-control"
                   name='yourName'
                   value={yourName}
                   onChange={this.handleOnChange}
                  ></input>
                </label>
                <br />
                <label className='form-group'>
                Email:
                <input 
                 type='text'
                 className="form-control"
                 name='yourEmail'
                 value={yourEmail}
                 onChange={this.handleOnChange}
                ></input>
                </label>
                <br />
                <label className='form-group'>
                Subject:
                <input 
                 type='text'
                 className="form-control"
                 name='subject'
                 value={subject}
                 onChange={this.handleOnChange}
                ></input>
                </label>
                <br />
                <div className="form-group">
                <label className="form-group"> Message:</label>
                <textarea 
                 type='textarea'
                 className="form-control"
                 name='message'
                 value={message} 
                 onChange={this.handleOnChange}
                 rows="3"
                ></textarea>
                </div>
  <br />
  <button type='submit' className='btn btn-primary'>Login</button>
<h1>{successMessage}</h1>                
                </form>
            </React.Fragment>
        )
    }
}
export default Contact

Контактная форма 7 Макет:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...