选项1 - 完全无头

Question

我目前遇到Gravity Forms和ReactJS的问题。我正在尝试在ReactJS组件中加载重力形式作为模态以用于联系目的。基本上，我当前设置的方法是从self.entries = (response.result.value!["results"] as? [NSDictionary])!为加载了表单的页面执行GET，然后使用WP-API在组件中构建页面。问题是，当我尝试提交表单时，它给了我dangerouslySetInnerHTML的问题。它试图将其从POST提交到URL。我可以在这里用一些严肃的帮助来解决最好的方法。

GET

Answer 1

这个问题可能已经过时了，但是使用WP REST API“无声地”在WordPress上构建React应用程序正在以巨大的方式获得动力（甚至是WordPress核心的未来），所以这必然会出现越来越多

所以正在发生的事情是Gravity Forms通过$action = remove_query_arg( 'gf_token' );设置它的表单操作，然后调用add_query_arg()然后调用$uri = $_SERVER['REQUEST_URI']; - 这意味着当你使用React显示WordPress时包含重力形式的内容，表单的动作设置为调用的REST端点，而不是内容的永久链接。糟糕！

虽然Gravity Forms在作品中有一个真正的WP REST API附加组件，但到目前为止我有两个可靠的选项：

选项1 - 完全无头

确保您有一条接受POST的REST路由（我建议只重用GET路由）并将do_action('wp');添加到您的路由回调中。如果您愿意，可以先添加它，例如rest_api_init挂钩。这将确保在向REST请求发送时触发Gravity Forms。

或者，您可以从路由回调中调用GFForms::maybe_process_form()，或将其用作rest_api_init挂钩中的回调。诀窍是确保在API收到请求时调用该方法。

接下来，让React处理您的表单提交（您不希望浏览器直接发布它并显示您的访问者JSON）。 REST API将自动返回具有正确处理的重力形式标记的响应...验证/错误消息，确认等。请注意，此方法的重力形式需要为ajax = false。

选项2 - 无面（半无头）

假设您想要保留WordPress的永久链接，您可能会将REST API端点配置为与WordPress永久链接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与当前页面匹配，以便Gravity Form能够将其数据成功发布到WordPress。但是，虽然这允许Gravity Forms回发实际到达服务器，但如果您只使用 REST API，那么您将无法获得任何有意义的内容...因为响应与请求相关联到服务器，但React正在为API提供新的单独的内容请求。你会得到一个新的形式。那不好用户体验。

要解决此问题，您需要在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应用程序中，首先检查是否存在此变量，并使用数据（如果存在）。如果没有，请回过头来像往常一样发出REST请求。

我知道这个答案非常具有架构性，但是有很多方法可以解决这个问题，这在很大程度上取决于你如何用WordPress构建你的React实现。

重力形式＆amp; ReactJS - 将表单加载到模态并提交

1 个答案:

选项1 - 完全无头

选项2 - 无面（半无头）