javascript - 使用 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 创建元素，但您不应该这样做。

要在您的案例中拆分逻辑和 View ，您可以将“套接字代码”移至高阶组件 ( https://facebook.github.io/react/docs/higher-order-components.html )。

在其中您可以制作所有套接字魔法并将其作为 Prop 传递给包装组件。所有更改都将自动应用。