使用AJAX通過AJAX發送數據Flux architechture

Following is my react code: 
var AddRecord = React.createClass({ 
       getInitialState: function() { 
         return { 
          Data: [] 
         } 
        }, 

       sendData : function() { 

       //AJAX Code 
       },   

       fieldHandle : function(event){ 
        var cellData = event.target.value; 
        console.log(cellData); 
        Data : cellData 
       }.bind(this), 

       render: function() { 
        return (
          <form onSubmit={this.sendData()} name="AddRecord" method="post"> 
           <table><tr><td>Enter Id</td><td><input type="text" onChange={this.fieldHandle} name="name"/></td></tr> 
           <tr><td></td><td><input type="submit" name="submit" value="submit"/></td></tr> 
           </table> 
          </form> 
       ); 
      } 
     }); 

     React.render(<AddRecord/>, document.getElementById('form-data'));

我想寫AJAX代碼發送數據到process.php。我認爲，我應該使用flux體系結構來幫助我安裝flux和編寫代碼來發送數據。提前感謝。使用AJAX通過AJAX發送數據Flux architechture

來源

2015-12-14 Param

我認爲你對Flux有一個概念性的誤解。 Flux是幫助您管理狀態的設計模式。有許多不同的通量實現。（例如Redux，Reflux，Alt。）如果你想使用助焊劑，選擇一個框架並閱讀它。但是，請注意，Flux不是AJAX庫。對於AJAX功能，您需要一個專門用於該功能的庫。（如jQuery的，SuperAgent的，取。） –

@DavidWalsh可我知道如何使用AJAX來發送數據reactJS – Param

您只需要定義您的sendData方法，以便它包含AJAX提交。

sendData: function() { 
    var name = this.refs.nameField.value; 
    $.ajax({ 
     method: 'POST', 
     url: '/submit', 
     data: { 
      name: name 
     } 
    }).done(function() { 
     // set state to indicate success 
    }).fail(function() { 
     // set state to indicate failure 
    }); 
}

我會離開它你弄清楚如何定義done和fail回調。

當然，你不必使用AJAX的jQuery。它可能適合使用像SuperAgent這樣的小型庫。

最後，請注意使用this.refs.nameField.value。引用是React的一個特性。您只需要用ref屬性定義輸入。

<input ref="nameField" type="text" name="name" />

來源

2015-12-14 07:53:28

我已經得到了錯誤：類型錯誤：this.refs.nameField未定義 \t

– Param

您需要將輸入標籤上的引用，如最後一行答案中所示。另外，將'onSubmit = {this.sendData（）}'改爲'onSubmit = {this.sendData}'。 –

使用AJAX通過AJAX發送數據Flux architechture

回答

相關問題