import React, { Component } from "react";
import { render } from "react-dom";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import JqxButton from "jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons";
import * as ReactDOM from "react-dom";
import JqxWindow from "jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";
import JqxChart, {
IChartProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxchart";
import JqxGrid, {
IGridProps,
jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import JqxTabs from "jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs";
import JqxDropDownList, {
IDropDownListProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";
interface AppProps {}
interface AppState {
name: string;
}
interface IProps extends IGridProps {
rendertoolbar1: IGridProps["rendertoolbar"];
dropdownlistSource: IDropDownListProps["source"];
}
class App extends Component<{}, IProps> {
private myTabs = React.createRef<JqxTabs>();
private gridElement = React.createRef<HTMLDivElement>();
private gridElementTwo = React.createRef<HTMLDivElement>();
private myGrid = React.createRef<JqxGrid>();
private myGrid2 = React.createRef<JqxGrid>();
private myWindow = React.createRef<JqxWindow>();
private myWindowTWO = React.createRef<JqxWindow>();
private date = React.createRef<JqxInput>();
private sAndP500 = React.createRef<JqxInput>();
constructor(props: {}) {
super(props);
this.saveBtn = this.saveBtn.bind(this);
this.cancelBtn = this.cancelBtn.bind(this);
this.saveBtntwo = this.saveBtn.bind(this);
this.cancelBtntwo = this.cancelBtn.bind(this);
const rendertoolbar = (toolbar: any): void => {
const addRowClick = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindow.current!.open();
};
const addRowClickTwo = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindowTWO.current!.open();
};
ReactDOM.render(
<div style={{ margin: "5px" }}>
<div
id="buttonContainer2"
style={{ float: "left", marginLeft: "5px" }}
>
<JqxButton
onClick={addRowClickTwo}
width={125}
value={"Add New NASDAQ"}
/>
</div>
</div>,
toolbar[0]
);
};
const rendertoolbar1 = (toolbar: any): void => {
const addRowClick = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindow.current!.open();
};
const addRowClickTwo = () => {
//const datarow = this.generaterow();
//this.myGrid.current!.addrow(null, datarow);
this.myWindowTWO.current!.open();
};
ReactDOM.render(
<div style={{ margin: "5px" }}>
<div id="buttonContainer1" style={{ float: "left" }}>
<JqxButton
onClick={addRowClick}
width={135}
value={"Add New Us Index"}
/>
</div>
</div>,
toolbar[0]
);
};
this.state = {
rendertoolbar,
rendertoolbar1,
// dropdownlistSource: ["Affogato", "Americano", "Bicerin", "Breve"]
dropdownlistSource: [
{ value: 0, label: "Affogato" },
{ value: 1, label: "Americano" },
{ value: 2, label: "Bicerin" },
{ value: 3, label: "Breve" }
]
//source: new jqx.dataAdapter(source)
};
}
public render() {
return (
<JqxTabs
ref={this.myTabs}
// @ts-ignore
width={400}
height={560}
initTabContent={this.initWidgets}
onSelected={this.onTabSelected}
>
<JqxWindow
ref={this.myWindow}
width={250}
height={230}
resizable={false}
isModal={false}
autoOpen={false}
modalOpacity={"0.01"}
position={{ x: 68, y: 368 }}
>
<div>Add New US Indexes</div>
<div style={{ overflow: "hidden" }}>
<table>
<tbody>
<tr>
<td align={"right"}>Date:</td>
<td align={"left"}>
<JqxInput ref={this.date} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"}>S & P 500:</td>
<td align={"left"}>
<JqxInput ref={this.sAndP500} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"}>DropDownList:</td>
<td align={"left"}>
<JqxDropDownList
width={100}
height={20}
source={this.state.dropdownlistSource}
selectedIndex={0}
/>
</td>
</tr>
<tr>
<td align={"right"} />
<td style={{ paddingTop: "10px" }} align={"right"}>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.saveBtn}
width={50}
>
Save
</JqxButton>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.cancelBtn}
width={50}
>
Cancel
</JqxButton>
</td>
</tr>
</tbody>
</table>
</div>
</JqxWindow>
<JqxWindow
ref={this.myWindowTWO}
width={250}
height={230}
resizable={false}
isModal={false}
autoOpen={false}
modalOpacity={"0.01"}
position={{ x: 68, y: 368 }}
>
<div>Add New NASDAQ</div>
<div style={{ overflow: "hidden" }}>
<table>
<tbody>
<tr>
<td align={"right"}>Date:</td>
<td align={"left"}>
<JqxInput ref={this.date} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"}>S & P 500:</td>
<td align={"left"}>
<JqxInput ref={this.sAndP500} width={150} height={23} />
</td>
</tr>
<tr>
<td align={"right"} />
<td style={{ paddingTop: "10px" }} align={"right"}>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.saveBtntwo}
width={50}
>
Save
</JqxButton>
<JqxButton
style={{ display: "inline-block", marginRight: "5px" }}
onClick={this.cancelBtntwo}
width={50}
>
Cancel
</JqxButton>
</td>
</tr>
</tbody>
</table>
</div>
</JqxWindow>
<ul>
<li style={{ marginLeft: 30 }}>
<div style={{ height: 20, marginTop: 5 }}>
<div style={{ float: "left" }}>
<img width="16" height="16" src="./../images/catalogicon.png" />
</div>
<div
style={{
marginLeft: 4,
verticalAlign: "middle",
textAlign: "center",
float: "left"
}}
>
US Indexes
</div>
</div>
</li>
<li>
<div style={{ height: 20, marginTop: 5 }}>
<div style={{ float: "left" }}>
<img width="16" height="16" src="./../images/pieicon.png" />
</div>
<div
style={{
marginLeft: 4,
verticalAlign: "middle",
textAlign: "center",
float: "left"
}}
>
NASDAQ compared to S&P 500
</div>
</div>
</li>
</ul>
<div style={{ overflow: "hidden" }}>
<div id="jqxGrid" ref={this.gridElement} />
<div style={{ marginTop: 10, height: "15%" }} />
</div>
<div style={{ overflow: "hidden" }}>
<div id="jqxGrid2" ref={this.gridElementTwo} />
<div style={{ marginTop: 10, height: "15%" }} />
</div>
</JqxTabs>
);
}
private initGrid = () => {
const source = {
datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
datatype: "csv",
//url: './assets/nasdaq_vs_sp500.txt'
localdata: `1/2/2014,1831.98,4143.07
1/3/2014,1831.37,4131.91
1/6/2014,1826.77,4113.68
1/7/2014,1837.88,4153.18
1/8/2014,1837.49,4165.61
1/9/2014,1838.13,4156.19
1/10/2014,1842.37,4174.67
1/13/2014,1819.2,4113.3
1/14/2014,1838.88,4183.02
1/15/2014,1848.38,4214.88
1/16/2014,1845.89,4218.69
1/17/2014,1838.7,4197.58
1/21/2014,1843.8,4225.76
1/22/2014,1844.86,4243
1/23/2014,1828.46,4218.88
1/24/2014,1790.29,4128.17
1/27/2014,1781.56,4083.61
1/28/2014,1792.5,4097.96
1/29/2014,1774.2,4051.43
1/30/2014,1794.19,4123.13
1/31/2014,1782.59,4103.88
2/3/2014,1741.89,3996.96
2/4/2014,1755.2,4031.52
2/5/2014,1751.64,4011.55
2/6/2014,1773.43,4057.12
2/7/2014,1797.02,4125.86`
};
const dataAdapter = new jqx.dataAdapter(source, {
async: false,
loadError: (xhr: any, status: any, error: any) => {
console.log(xhr, status, error);
//alert('Error loading "' + source.url + '" : ' + error);
}
});
const columns: IGridProps["columns"] = [
{ cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
{ datafield: "S&P 500", text: "S&P 500", width: 150 },
{ datafield: "NASDAQ", text: "NASDAQ" }
];
const grid = (
<JqxGrid
ref={this.myGrid}
width={"100%"}
height={400}
source={dataAdapter}
columns={columns}
showtoolbar={true}
rendertoolbar={this.state.rendertoolbar1}
/>
);
render(grid, this.gridElement.current!);
};
private saveBtn(): void {
const row = {
sAndP500:this.sAndP500.current!.getOptions('value'),
date:this.date.current!.getOptions('value')
}
console.log("Testing Row inside SaveBtn");
console.log(row);
this.myWindow.current!.hide();
}
private cancelBtn(): void {
this.myWindow.current!.hide();
}
private initGrid2 = () => {
const source = {
datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
datatype: "csv",
//url: './assets/nasdaq_vs_sp500.txt'
localdata: `1/2/2014,1831.98,4143.07
1/3/2014,1831.37,4131.91
1/6/2014,1826.77,4113.68
1/7/2014,1837.88,4153.18
1/8/2014,1837.49,4165.61
1/9/2014,1838.13,4156.19
1/10/2014,1842.37,4174.67
1/13/2014,1819.2,4113.3
1/14/2014,1838.88,4183.02
1/15/2014,1848.38,4214.88
1/16/2014,1845.89,4218.69
1/17/2014,1838.7,4197.58
1/21/2014,1843.8,4225.76
1/22/2014,1844.86,4243
1/23/2014,1828.46,4218.88
1/24/2014,1790.29,4128.17
1/27/2014,1781.56,4083.61
1/28/2014,1792.5,4097.96
1/29/2014,1774.2,4051.43
1/30/2014,1794.19,4123.13
1/31/2014,1782.59,4103.88
2/3/2014,1741.89,3996.96
2/4/2014,1755.2,4031.52
2/5/2014,1751.64,4011.55
2/6/2014,1773.43,4057.12
2/7/2014,1797.02,4125.86`
};
const dataAdapter = new jqx.dataAdapter(source, {
async: false,
loadError: (xhr: any, status: any, error: any) => {
console.log(xhr, status, error);
//alert('Error loading "' + source.url + '" : ' + error);
}
});
const columns: IGridProps["columns"] = [
{ cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
{ datafield: "S&P 500", text: "S&P 500", width: 150 },
{ datafield: "NASDAQ", text: "NASDAQ" }
];
const grid = (
<JqxGrid
ref={this.myGrid2}
width={"100%"}
height={400}
source={dataAdapter}
columns={columns}
showtoolbar={true}
rendertoolbar={this.state.rendertoolbar}
/>
);
render(grid, this.gridElementTwo.current!);
};
private saveBtntwo(): void {
this.myWindowTWO.current!.hide();
}
private cancelBtntwo(): void {
this.myWindowTWO.current!.hide();
}
private initWidgets = (tab: any) => {
switch (tab) {
case 0:
this.initGrid();
break;
case 1:
this.initGrid2();
break;
}
};
private onTabSelected = (event: any) => {
switch (event.args.item) {
case 0:
// this.hideButton();
break;
case 1:
// this.showButton();
break;
}
};
}
render(<App />, document.getElementById("root"));
在编辑器的#344行中,我定义了以下函数:
private saveBtn(): void {
const row = {
sAndP500:this.sAndP500.current!.getOptions('value'),
date:this.date.current!.getOptions('value')
}
console.log("Testing Row inside SaveBtn");
console.log(row);
this.myWindow.current!.hide();
}
使用sAndP500:this.sAndP500.current!.getOptions('value')
和date:this.date.current!.getOptions('value')
是获取用户在Add
窗口中以及单击保存按钮时输入的任何值的方法。
我想知道的是,让我们在编辑器中的#208行上说是否要为sAndP500
设置默认值,而不是用户输入值,如下面的代码行所示:
<tr>
<td align={"right"}>S & P 500:</td>
<td align={"left"}>
<JqxInput ref={this.sAndP500} width={150} height={23} />
</td>
</tr>
因此,如果正确执行,我将像这样修改上面的代码(基本上将ref={this.sAndP500}
更改为value={20}
)
:
<tr>
<td align={"right"}>S & P 500:</td>
<td align={"left"}>
<JqxInput value={20} width={150} height={23} />
</td>
</tr>
然后我想知道如何在20
函数中获取值saveBtn()
,因为我将无法使用this.sAndP500.current!.getOptions('value')
private saveBtn(): void {
const row = {
//sAndP500:this.sAndP500.current!.getOptions('value'), // Can't use this anymore
date:this.date.current!.getOptions('value')
}
console.log("Testing Row inside SaveBtn");
console.log(row);
this.myWindow.current!.hide();
}
答案 0 :(得分:0)
您可以将输入值保存在本地状态中,每当您按“保存”按钮时,都可以从该州获取这些数据。
此外,我的建议是: 1.为了不创建如此庞大的组件,请尽可能拆分并创建可重用的组件(也许这仅适用于审阅者,但仍然如此) 2.另外,请尽量不要经常使用ref,这是有关此问题的文档和建议-Don't overuse refs
希望这会有所帮助:)