0
WebSocket接続からデータを受け取ったときにReactコンポーネントの状態を更新しようとしています。トリガーJS/jQueryでonChangeイベントに反応する
私は非表示の入力フォームを作成しました。変更されたときに状態が更新され、コンポーネントは状態内に格納されたデータに基づいて自動的に更新されます。
私はもともとReactイベントを.change()で起動しようとしましたが、実際にはイベントが実際のDOMイベントではないため、実際にはReactイベントをトリガーできません。 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;
}
}
};
}
}));
}
}
おかげ