react➕antd中使用switch...case...

墨蓝 2022-02-05 10:34 959阅读 0赞

1，使用switch...case...效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70][]

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);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70]: /images/20220205/b8c325b796ed4d4faa831f2ca6f46c66.png