Question

我试图在从WebSocket连接收到数据时更新React组件中的状态。

我创建了一个隐藏的输入表单，当它被更改时会触发状态更新，组件将根据状态中存储的数据自动更新。

我最初尝试使用.change()触发React事件并且不起作用，事实证明您无法使用jQuery实际触发React事件，因为事件实际上并不适合DOM事件。所以我尝试实际设置从WebSocket发送的数据的输入值，这也没有工作（数据可以每秒接收 - 有时甚至更快）。

如果我将输入设置为文本并开始输入，则组件会正确更新。但是每当从服务器收到数据时我都需要更新它。

这是我到目前为止的尝试：

class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: parsedTradeData };
    this.handleChange = this.handleChange.bind(this);
    console.log("constructed")
  }
  handleChange(event) {
    console.log("changed")
    this.setState({ data: makeData() });
  }
  componentWillReceiveProps(nextProps) {
    console.log("next props")
    console.log(nextProps)
  }
  render() {
    return (
      <div>
        <input type="hidden" className="trade-table-data-input" onChange={ this.handleChange } />
        {this.drawTable()}
      </div>
    );
  }
  drawTable() {
    return React.createElement('div', null, React.createElement(ReactTable, {
            data: this.state.data,
            columns: columns,
            defaultPageSize: 25,
            showPagination: true,
            className: '-striped -highlight table',
            SubComponent: function SubComponent(row) {
                tradeDetailsID = row['row']['id'];

                tradeDetailsConnection = new WebSocket('ws://kieron-pc:8080/request');

                tradeDetailsConnection.onopen = function() {
                    var args = [
                        sessionID,
                        $('#acc_select option:selected').val(),
                        pageID,
                        '15',
                        'TradeDetails',
                        row['row']['id']
                    ];

                    tradeDetailsConnection.send(args.join(','));

                    tradeDetailsConnection.onmessage = function(event) {
                        var dataReceived = event.data.split(',').slice(6).join(',');
                        var requestType = JSON.parse(event.data.split(',')[6] + "}")['id'];

                        data["TradeDetails" + requestType] = dataReceived;
                    }
                }

                return React.createElement("div", { className: "container" }, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-md-6" }, React.createElement('h5', null, 'Summary'), React.createElement('div', null, React.createElement(ReactTable, {
                            data: makeTradeDetailsSummaryData(row['row']['id']),
                            columns: tradeDetailsSummaryColumns,
                            defaultPageSize: 5,
                            showPagination: false
                        })), React.createElement("h5", null, "Costs"), React.createElement('div', null, React.createElement(ReactTable, {
                            data: makeTradeDetailsCostsData(row['row']['id']),
                            columns: tradeDetailsCostsColumns,
                            defaultPageSize: 4,
                            showPagination: false
                        }))), React.createElement("div", { className: "col-md-6" }, React.createElement("p", null, "chart")), React.createElement("div", { className: "col-md-12" }, React.createElement("h5", null, "Daily Breakdown"), React.createElement("h5", null, "Executions"), React.createElement('div', null, React.createElement(ReactTable, {
                            data: makeTradeDetailsExecutionsData(row['row']['id']),
                            columns: tradeDetailsExecutionsColumns,
                            defaultPageSize: 4,
                            showPagination: false
                        })))));
            },
            defaultSortMethod: function defaultSortMethod(a, b) {
                a = a === null || a === undefined ? '' : a;
                b = b === null || b === undefined ? '' : b;

                if (isNaN(a) && isNaN(b)) {
                    a = a.toLowerCase();
                    b = b.toLowerCase();

                    if (a > b) {
                        return 1;
                    }

                    if (a < b) {
                        return -1;
                    }

                    return 0;
                } else {
                    return a - b;
                }
            },
            getTrProps: function getTdProps(state, rowInfo, column) {
                return {
                    onClick: function onClick(e) {
                        if (expands[rowInfo.index] == true) {
                            expands[rowInfo.index] = false;
                        } else {
                            expands[rowInfo.index] = true;
                        }
                    }
                };
            }
        }));
  }
}

由于

Answer 1

这段代码看起来太迫切了。 React的主要观点之一是声明性。您可以按React.createElement创建元素，但不应该。

要在您的情况下拆分逻辑和视图，您可以移动＆＃34;套接字代码＆＃34;到高阶组件（https://facebook.github.io/react/docs/higher-order-components.html）。

在其中你可以使你的所有套接字魔术并将其作为道具传递给包裹组件。所有更改都将自动应用。

使用JS / jQuery触发反应onChange事件

1 个答案: