1,使用switch...case...效果
2,主要代码
switch (num) {
case 1 :
return (<span>{}</span>);
break;
case 2 :
return (<span> {}</span>);
break;
default :
return (<span> {}</span>);
break;
}
};
3,详细代码
import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'dva';
import { Row, Col, Table, Radio, Input, Form, Button, Icon, DatePicker, Select, Modal, Popconfirm, Checkbox, message, Tag,
TreeSelect,Menu,Dropdown, Tree,notification,Alert,Upload,Popover
} from 'antd';
import styles from './studentsList.less';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const SelectOption = Select.Option;
const { Search, TextArea } = Input;
const dateFormat = 'YYYY/MM/DD';
const treeData = [{}];
@Form.create()
class StudentsList extends PureComponent {
batch = value =>{
this.setState({
num: value,
});
}
caseEdit =()=>{
const {
form: { getFieldDecorator },
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 20 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 18 },
sm: { span: 12 },
},
};
let {num} = this.state;
if(num==undefined){
num=1;
}
// console.log(num)
const selectValue = this.state.value;
const departmentsTreeList = this.props.departmentsTreeList;
switch (num) {
case 1 :
return (<span>{
<td>
<FormItem {...formItemLayout} >
{getFieldDecorator('field', {
initialValue: 'school_id',
})(<span className={styles.dontshow}>所属校区</span>)}
</FormItem>
<FormItem {...formItemLayout}>
{getFieldDecorator('to_value', {
initialValue: selectValue,
})(
<TreeSelect
showSearch
style={{ width: 200 }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择所属校区"
allowClear
onChange={this.onChange}
>
{this.renderTreeNodes(departmentsTreeList)}
</TreeSelect>
)}
</FormItem>
</td>
}</span>);
break;
case 2 :
return (<span> {
<td>
<FormItem {...formItemLayout} >
{getFieldDecorator('field', {
initialValue: 'gender',
})(<span className={styles.dontshow}>孩子性别</span>)}
</FormItem>
<FormItem {...formItemLayout} >
{getFieldDecorator('to_value', {})(
<Input style={{ width: 200 }} placeholder="孩子性别"/>
)}
</FormItem>
</td>
}</span>);
break;
default :
return (<span> {
<td>
<FormItem {...formItemLayout} >
{getFieldDecorator('to_value', {})(
<Input style={{ width: 200 }} placeholder=""/>
)}
</FormItem>
</td>
}</span>);
break;
}
};
renderBatchEditor() {
const {
form: { getFieldDecorator },
} = this.props;
const modalVisible2 = this.props.modalVisible2;
const width=600;
const formItemLayout = {
labelCol: {
xs: { span: 20 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 18 },
sm: { span: 12 },
},
};
return (
<Modal
width={width}
visible={modalVisible2}
onCancel={this.handleCancel2}
onOk={this.handleOk2}
footer={null}
destroyOnClose
>
<Form onSubmit={this.handleBatchEditor} layout="inline">
<div style={{paddingLeft:"20px",paddingRight:"20px",paddingBottom:"80px",paddingTop:"80px"}}>
<tr>
<td style={{lineHeight:"40px"}}>
<FormItem {...formItemLayout}>
{getFieldDecorator('num', {
initialValue: 1,
})(
<Select
style={{ width: 200 }}
showSearch
onChange={this.batch}
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option key={1} value={1}>所属校区</Option>
<Option key={2} value={2}>孩子性别</Option>
</Select>
)}
</FormItem>
</td>
<td style={{lineHeight:"40px"}}>替换成 </td>
<td style={{lineHeight:"40px"}}> {this.caseEdit()}</td>
</tr>
<Button type="primary" htmlType="submit" style={{marginTop:"20px",}}>
{'保存'}
</Button>
</div>
</Form>
</Modal>
);
}
render() {
return(
<Button style={{ marginLeft: 5 }} className="ant-btn" onClic{this.showModal2}>
<span>批量编辑</span>{this.renderBatchEditor()}
</Button>
)
}
function mapStateToProps(state) {
return { ...state.students };
}
export default connect(mapStateToProps)(StudentsList);