В настоящее время я работаю над сайтом 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"]