javascript - 从反应中选择的下拉菜单中获取价值
问题描述
如何获取下拉菜单中选择的值?我有一个包含 12 个选项的选择下拉菜单。我想选择值,然后在 handlecolumnchange 中我想添加和删除选定的列数。我尝试了以下代码,但它不起作用。每当我在 select 中添加 value 道具时,网站就会崩溃。
到目前为止,我有以下代码,每当我单击选项时它都会删除和添加一列,但我想将添加/删除的列数设置为所选选项的值。
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 < 18; j++) {
let item = {};
item.a1 = "XXXX指标" + j;
for (let k = 0; k < 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</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);
}
解决方案
您忘记在这样设置的构造函数中绑定handleColumnChange,onChange={this.handleColumnChange.bind(this)}
但组件无法理解方法,只需绑定并调用它this.handleColumnChange
推荐阅读
- vue.js - VideoJS Player 似乎打破了 Vue-Router-3?
- google-drive-api - 如何使用 Google Drive API 获取 resourceKey?
- python - DataTable - 单元格中的仅颜色子字符串
- lua - 我正在尝试编写一个脚本来告诉我鼠标何时进入和离开 Roblox Studio 中的 ClickDetector
- java - mockServer andExpect(content().XML 与当前日期连接
- java - JFrame 是如何实际创建的?
- javascript - 安装 body-parser 时出现 404 错误
- python - Apache 无法使用 UTF-8 我该如何解决这个问题
- java - Corda 示例在尝试运行节点时失败
- arrays - 动态分配的指针数组