从react中选择的下拉菜单中获取值

wbrvyc0a  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(421)

如何在下拉菜单中选择值?我有一个选择下拉列表,有12个选项。我希望选择值,然后在handlecolumnchange中添加和删除选定的列数。我尝试了以下代码,但它不起作用。每当我在select中添加值道具时,网站就会崩溃。
到目前为止,我有以下代码,每当我单击options时,它将删除和添加一列,但我想将添加/删除的列数设置为option selected的值。

constructor(args) {
    super(args);

    this.state = {
      locale: LangDict.lang == 'cn' ? null : enUS,
      status: Status.LOADING,
      value: moment(),
      tableData: [],//表格数据
      tableColumns: [],//表头
      selectValue: "",
      pagination: false,//表格分页
    };
  }

getDataFinish(xml) {
    console.log("【EDBHomeWeb】 getDataFinish xml", xml);
    //TODO--处理数据并进行页面展示

    let tableColumns = [];
    let tableData = [];

    tableColumns = [
      {
        title: '指标',
        dataIndex: 'a1',
      },
    ];

    //动态生成表头
    for (let i = 0; i < 1; i++) {
      tableColumns.push(
        {
          title: '2021' + (i + 1 + 5) + 'F',
          dataIndex: 'a' + (i + 2),
          align:'right'

        },
      );
    }

    for (let i = 0; i < 12; i++) {

      if (i < 6) {
        tableColumns.push(
          {
            title: '20210' + (-i + 6),
            dataIndex: 'a' + (i + 3),
            align:'right'

          },
        );
      }

      if (i >= 6 && i < 9) {
        tableColumns.push(
          {
            title: '2020' + (-i + 18),
            dataIndex: 'a' + (i + 9),
            align:'right'
          },
        );
      }

      if (i >= 9) {
        tableColumns.push(
          {
            title: '20200' + (-i + 18),
            dataIndex: 'a' + (i + 12),
            align:'right'
          },
        );
      }

    }

    //动态生成数据
    for (let j = 0; j &lt 18; j++) {
      let item = {};
      item.a1 = "XXXX指标" + j;
      for (let k = 0; k &lt 22; k++) {
        item['a' + (k + 2)] = "" + j + "" + k;
      }
      tableData.push(
        item
      );
    }

    this.setState({ tableData, tableColumns, selectMonth});

}

handleColumnChange(e) {
    const {tableColumns} = this.state;
    var d = document.getElementById('dropDown')
    this.setState({selectValue:e.target.value});
    let item = {
      title: '20210', 
      dataIndex: 'a',
      align:'right',
    };
    tableColumns.splice(1, 0, item);
    tableColumns.pop();

this.setState({
        tableColumns: tableColumns
      });

}

handleRadioChange() {
  const {tableColumns} = this.state;

  let tableColumnsAnnual = {};
  tableColumnsAnnual = [
    {
      title: '指标',
      dataIndex: 'a1',
    }
];

for (let i = 0; i < 1; i++) {
  tableColumnsAnnual.push(
    {
      title: '202' + (i + 1) + 'F',
      dataIndex: 'a' + (i + 2),
      align:'right'

    },
  );
}

for (let i = 0; i < 4; i++) {
    tableColumnsAnnual.push(
      {
        title: '20' + (-i + 20),
        dataIndex: 'a' + (i + 3),
        align:'right'

      },
    );
  }
  tableColumns.splice(0, 14, ...tableColumnsAnnual)

    this.setState({
      tableColumns: tableColumns
    });

}

  render() {
    // console.log('root render第' + this.renderNum++ + "次"); 
    const { locale, tableData, tableColumns, pagination } = this.state;
    const { bordered } = this.state;
    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;
    const Option = Select.Option;

    return (
      <LocaleProvider locale={locale}>
        <div>
          <span>EDBHomeDemo&lt/span>
          <div style={{ marginTop: 16 }}>
            <RadioButton style={{ width: 120}} value="月度数据">月度数据</RadioButton > //monthly report button//
            <RadioButton style={{ width: 120}} value="年度数据" onChange={this.handleRadioChange.bind(this)}>年度数据<RadioButton>
//annual report button//
            <div>             
             <span>预测月数</span>
            <Select
              id="dropDown"
              allowClear
              placeholder="1"
              style={{ width: 120, marginRight: 10 }}
              value={this.state.selectValue} 
              ref = {ref => this.select = ref}
              onChange={this.handleColumnChange.bind(this)}
            >
                <Option value='1'>1</Option>
                <Option value='2'>2</Option>
                <Option value='3'>3</Option>
               <Option value='4'>4</Option>
                <Option value='5'>5</Option>
                <Option value='6'>6</Option>
                <Option value='7'>7</Option>
                <Option value='8'>8</Option>
                <Option value='9'>9</Option>
                <Option value='10'>10</Option>
                <Option value='11'>11</Option>
                <Option value='12'>12</Option>

             </Select>
            </div>

            <Table
              columns={tableColumns}
              dataSource={tableData}
              pagination={pagination}
            />
          </div>
          </div>

      </LocaleProvider>
    );
  }
}

const root = document.getElementById('root');
if (root) {
  render(<EDBHomeDemo />, root);
}
p4tfgftt

p4tfgftt1#

您忘了像这样在构造函数中绑定handlecolumnchange onChange={this.handleColumnChange.bind(this)} 但组件无法理解方法,只需绑定并调用它即可 this.handleColumnChange

相关问题