从反应中的输入获取默认值

时间：2019-11-14 21:28:21

标签： reactjs

我在editor here

中有以下代码 
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();
      }

1 个答案:

答案 0 :(得分：0)

您可以将输入值保存在本地状态中，每当您按“保存”按钮时，都可以从该州获取这些数据。

此外，我的建议是： 1.为了不创建如此庞大的组件，请尽可能拆分并创建可重用的组件（也许这仅适用于审阅者，但仍然如此） 2.另外，请尽量不要经常使用ref，这是有关此问题的文档和建议-Don't overuse refs

希望这会有所帮助:)

相关问题
最新问题