javascript - 使用react Flux架构通过AJAX发送数据

Question

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 并编写代码来发送数据。提前致谢。

Answer 1

您只需定义 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 回调。

当然，您不必使用 jQuery 来实现 AJAX。使用像 SuperAgent 这样的较小的库可能比较合适。

最后，请注意 this.refs.nameField.value 的使用。引用是 React 的一个功能。您只需使用 ref 属性定义您的输入即可。

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