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 for AJAX。可能适合使用像SuperAgent这样的较小的库。

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

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

使用react Flux architechture通过AJAX发送数据

1 个答案: