3
Ich bin derzeit auf ein Problem mit Gravity Forms und ReactJS stecken. Ich versuche, eine Gravitationsform als Modal in einer ReactJS-Komponente für Kontaktzwecke zu laden. Grundsätzlich, wie ich derzeit eingerichtet bin, ist eine GET aus der WP-API für die Seite mit dem Formular geladen in, und dann dangerouslySetInnerHTML, um die Seite in der Komponente zu bauen. Das Problem ist jedoch, dass wenn ich versuche, das Formular zu senden, gibt es ein Problem mit der POST. Sein Versuch, es an die URL von der GET einzureichen. Ich kann hier einige ernsthafte Hilfe für den besten Ansatz verwenden.Gravity Forms & ReactJS - Formular in Modal laden und senden
import React, { PropTypes } from 'react';
import Modal from 'react-modal';
import $ from 'jquery';
class RequestContactModal extends React.Component {
constructor(props) {
super(props);
this.state = {
content: ''
};
}
componentWillMount() {
const wpApiUrl = '../wp-json/wp/v2/pages/61';
$.ajax({
url: wpApiUrl,
type: 'GET'
})
.done((response) => {
console.log(response);
this.setState({
content: response.content.rendered
});
})
.fail((response) => {
console.log('fail');
console.log(response);
});
}
handleSubmit = (ev) => {
ev.preventDefault();
this.props.closeModal();
}
handleCloseClick = (ev) => {
ev.preventDefault();
this.props.closeModal();
}
render() {
const customStyles = {
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.65)'
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
background: '#fff'
}
};
return (
<Modal
isOpen={this.props.isOpen}
onRequestClose={this.props.closeModal}
style={customStyles}
>
<div>
<p>Gravity Forms</p>
<div dangerouslySetInnerHTML={{__html: this.state.content}} />
</div>
</Modal>
);
}
}
RequestContactModal.propTypes = {
closeModal: PropTypes.func.isRequired,
isOpen: PropTypes.bool
};
RequestContactModal.defaultProps = {
isOpen: false
};
export default RequestContactModal;