重力形式& ReactJS -加载形式进入模态并提交
目前，我遇到了引力表单和ReactJS的问题。我正试图在ReactJS组件中将重力表单作为一个模块加载，以供联系人使用。基本上，我目前的设置方式是在加载表单的情况下，从WP-API中为页面执行一个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;回答 1
Stack Overflow用户
发布于 2018-02-24 07:06:53
这个问题可能很老，但是使用WordPress构建在WordPress上的应用程序“表面上”正在以一种巨大的方式增长势头(甚至是WordPress核心的未来)，所以这肯定会越来越多。
现在发生的事情是，重力表单通过$action = remove_query_arg( 'gf_token' );设置它的表单操作，然后调用add_query_arg()，然后调用$uri = $_SERVER['REQUEST_URI']; --这意味着当您使用React显示包含重力表单的WordPress内容时，表单的操作被设置为名为REST端点，而不是内容的permalink。哇哦！
尽管引力表单在工作中有一个真正的WP REST附加程序，但到目前为止，我已经能够找到两个可靠的选项：
备选方案1-完全无头
确保您有一个接受POST的REST路由(我建议只重用GET路由)，并将do_action('wp');添加到路由回调中。如果您愿意，可以在更早的时候添加它，比如rest_api_init钩子。这将确保重力表单在向其发送REST请求时被触发。
或者，您可以从路由回调调用GFForms::maybe_process_form()，或者将其用作rest_api_init钩子中的回调。诀窍是确保在API接收到请求时调用该方法。
接下来，让React处理您的表单提交(您不希望浏览器实际上直接发布它并向访问者显示JSON)。REST将自动返回带有正确处理的重力表单标记的响应..。验证/错误消息、确认等。注意，对于这种方法，重力表单需要是ajax=false。
备选案文2-无面(半无头)
假设您希望保留WordPress的permalinks，则可能会配置REST端点来匹配WordPress permalink URI；因此，例如，/wp-json/your-post-name-here/等同于/your-post-name-here/。如果没有，则始终可以确保您正在发送URI和请求。如果您是这样处理它的，您可以在rest_api_init钩子中添加以下内容：
function tweak_request_uri() {
$prefix = '/' . rest_get_url_prefix();
$_SERVER['REQUEST_URI'] = str_replace( $prefix, '', $_SERVER['REQUEST_URI'] );
}这确保了REQUEST_URI与当前页面相匹配，以便重力表单能够成功地将其数据发布到WordPress。但是，虽然这允许重力表单回发实际到达服务器，但是如果只使用REST，则不会得到任何有意义的返回。因为响应与对服务器的请求相关联，但React是对API的内容提出一个新的单独请求。所以，你得到了一个新的表格。不是很好的UX，那个。
要解决这个问题，您需要获取用于在rest_ensure_response( $data )之前打包数据的任何函数、类、对象等，并在wp_head()钩子中调用它。您希望json_encode()将数据作为Javascript变量输出到脚本标记中。例如，类似这样的事情：
var $react_first_load_data = json_encode( [ 'id' => get_the_id(), 'title' => get_the_title(), 'content' => get_the_content() ] );
printf('<script type="text/javascript">window.reactFirstLoadData=%s</script>', $react_first_load_data);然后，在您的React应用程序中，首先检查是否存在此变量，如果存在，则使用该数据。如果没有，请回到照常提出其余的请求。
我知道这个答案是非常具有架构性的，但是有很多方法来解决这个问题，这在很大程度上取决于您如何用WordPress构建您的响应实现。
https://stackoverflow.com/questions/37931608
复制相似问题
腾讯云开发者
