如何在下拉菜单中选择值?我有一个选择下拉列表,有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 < 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);
}
1条答案
按热度按时间p4tfgftt1#
您忘了像这样在构造函数中绑定handlecolumnchange
onChange={this.handleColumnChange.bind(this)}
但组件无法理解方法,只需绑定并调用它即可this.handleColumnChange