用JS / jQuery觸發React onChange事件

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創建元素，但不能。

為了分解邏輯並查看您的情況，您可以將“套接字代碼”移動到高階組件（ https://facebook.github.io/react/docs/higher-order-components.html ）。

在其中，您可以使所有的插槽變魔術，並將其作為道具傳遞給包裝的組件。 所有更改將自動應用。