javascript - React 中的单选按钮“onChange”切换
问题描述
如何打开单选按钮并撤消“onChange”?我有两个单选按钮,当单击单选按钮“月度报告”时,它会从一个表格更改为另一个表格,但我希望能够在单击“年度报告”时将其更改回原始表格并来回更改。我不确定是否应该为此创建另一个状态?
constructor(args) {
super(args);
this.state = {
locale: LangDict.lang == 'cn' ? null : enUS,
status: Status.LOADING,
value: moment(),
tableData: [],//表格数据
tableColumns: [],//表头
selectMonth: [],
pagination: false,//表格分页
bordered : 'dotted',
};
}
getDataFinish(xml) {
console.log("【EDBHomeWeb】 getDataFinish xml", xml);
//TODO--处理数据并进行页面展示
let tableColumns = [];
let tableData = [];
let selectMonth = [];
selectMonth = [
{
value: '1',
},
];
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() {
const {tableColumns} = this.state;
var d = document.getElementById('dropDown')
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 }}
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);
}
解决方案
推荐阅读
- javafx - JavaFX:使用来自不同类的模型填充 TableView
- python-3.x - 如何修复:“ImportError: DLL load failed 找不到指定的过程。” 当 DLL 存在时
- github - Git hub合并问题 - 删除所有旧工作
- scala - 在将 mongo 集合作为流迭代时处理错误
- ios - Swift - 运行时奇怪的文本渲染
- node.js - 无法从注册表中发布
- java - 如何在定义坐标系时绘制一个点?
- node.js - 从 AWS Lambda 使用 Firebase 导致任务超时
- python-3.x - Windows 程序没有响应 tkinter gui 的问题
- json - 如何将其修复为 json 文件?