3
現在Gravity FormsとReactJSの問題に悩まされています。私はコンタクト目的でReactJSコンポーネントにモーダルとしてGravity Formをロードしようとしています。基本的には、私が現在設定している方法は、フォームがロードされたページのWP-APIからGETを実行してから、dangerouslySetInnerHTMLを使用してコンポーネントにページを構築することです。問題は、私がフォームを提出しようとすると、それが私にPOSTの問題を与えることです。そのGETからURLに送信しようとしています。私はここで真剣な助けを借りて最高のアプローチをとることができます。Gravity Forms＆ReactJS - モーダルにフォームをロードして送信する
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;