0
我试图从WebSocket连接收到数据时更新React组件中的状态。触发器与JS/jQuery的反应onChange事件
我创建了一个隐藏的输入表单，其中当它被更改时将触发状态更新，并且组件将根据存储在状态中的数据自动更新。
我最初试图触发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;
}
}
};
}
}));
}
}
感谢