使用 React Flux 架构通过 AJAX 发送数据答案

【问题标题】：Send data through AJAX using react Flux architechture使用 React Flux 架构通过 AJAX 发送数据
【发布时间】：2015-12-14 05:24:44
【问题描述】：

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 是一种帮助您管理状态的设计模式。通量有许多不同的实现。（例如 Redux、Reflux、Alt。）如果您想使用 Flux，请选择一个框架并阅读它。但是，请注意 Flux 不是 AJAX 库。对于 AJAX 功能，您将需要一个专门用于该功能的库。（例如 jQuery、SuperAgent、Fetch。）
@DavidWalsh 请问我知道如何使用 AJAX 在 reactJS 中发送数据

标签： javascript reactjs npm flux

【解决方案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 回调。

当然，您不必为 AJAX 使用 jQuery。改用 SuperAgent 等较小的库可能更合适。

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

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

【讨论】：

我遇到了错误：TypeError: this.refs.nameField is undefined
您需要将参考放在输入标签上，如答案的最后一行所示。另外，将onSubmit={this.sendData()} 更改为onSubmit={this.sendData}。