我目前卡在Gravity Forms和ReactJS的問題上。我正在嘗試在ReactJS組件中加載Gravity Form作爲Modal以用於聯繫目的。基本上，我目前的設置方式是通過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;

2016-06-20 SammyJJunior

這個問題可能是舊的，但建設做出反應WordPress的「facelessly」使用WP REST API是一個巨大方式蓄勢待發（它甚至未來WordPress的核心）的應用，所以這一定會來越來越多。

所以發生的是，引力形式將它經由$action = remove_query_arg('gf_token');進而調用add_query_arg()然後調用$uri = $_SERVER['REQUEST_URI'];形式的行動 - 這意味着，當您使用反應顯示含有重力形式WordPress的內容，形式的操作設置到REST端點調用，而不是內容的永久鏈接。哎呦！

雖然重力形式有善意，善意WP REST API插件在作品中，有兩個固體選擇我已經能夠蘇斯出迄今：

選項1 - 無頭全

確保你有一個接受POST的REST路由（我建議只重用一個GET路由），並將do_action('wp');添加到你的路由回調中。如果您願意，可以在早期添加它，例如rest_api_init掛鉤。這將確保在發送REST請求時重力表單被觸發。

或者，您可以從路由回調中調用GFForms::maybe_process_form()或將其用作rest_api_init鉤子中的回調。訣竅是確保在API收到請求時調用該方法。

接下來，讓React處理你的表單提交（你不希望瀏覽器直接發佈它並顯示你的訪問者JSON）。 REST API將自動返回帶有正確處理的Gravity Form標記的響應...驗證/錯誤消息，確認等。請注意，對於此方法，Gravity Forms需要爲ajax = false。

選項2 - 無面（半無頭）

假設你想保留的WordPress的永久鏈接，你將有可能你的REST API端點配置相匹配的WordPress的永久的URI;因此，例如/wp-json/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的。但是，雖然這可以使Gravity Forms回發到服務器的實際範圍，但如果您僅使用 REST API，則不會獲得任何有意義的回覆......因爲響應與服務器請求綁定，但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);

然後，在你作出反應的應用程序，你檢查這個變量的存在第一，如果目前使用的數據。如果不是，則照常回到製作REST請求。

我知道這個答案非常具有架構性，但有很多方法可以解決這個問題，它很大程度上取決於您如何使用WordPress構建React實現。

來源

2018-02-24 07:06:53

Gravity Forms＆ReactJS - 將表單載入模態並提交

回答

選項1 - 無頭全

選項2 - 無面（半無頭）

相關問題