現在、Gravity Forms と ReactJS の問題で立ち往生しています。コンタクトの目的で、重力フォームを ReactJS コンポーネントのモーダルとしてロードしようとしています。基本的に、私が現在どのように設定されているかは、フォームがロードされたページに対してGET
fromを実行し、コンポーネントでページを構築するために使用することです。問題は、フォームを送信しようとすると、. からに送信しようとしています。ここで、何が最善のアプローチであるかについて、深刻な助けを借りることができます。WP-API
dangerouslySetInnerHTML
POST
URL
GET
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;