注：文章不断更新，遇到一个比较BT+EX的bug就加，如有错误往指正,感谢
一般情况按着官网的来写不会出现什么问题,但是还是有不一样的问题出现

1.react里面遇到的，对象的另一种引用方法：xxx.aa xxx['aa']

    {currMenu.map((item,index)=>{
        return(
            <div className={`${Styles.btnBase}  ${Styles[item.cssName]} lf`}>{}</div>
        )
    })}

2.react遇到的，如果循环添加点击事件并且传入参数的写法

      onClick={(e) =>this.handleClick(item.path)}
   
//  如果采用下面的方法，会导致加载的时候就会被调用
    
        onClick={this.handleClick(item.path)}

3.React-antd的form表单中

如果单独使用from而不是组件的话，@Form.create()，需要在这个类之前加上这个。否则getFieldDecorator这个属性用不了；
如果你直接用组件来创建一个form的话，创建弹出框式的from：

SendApply = Form.create({ name: 'form_in_modal' })(
      class extends Component {
        render() {
              const { getFieldDecorator } = this.props.form;//记得加这个
           }
  }
    )

4.React如果页面跳转后需要传个参数，然后另一个页面需要通过这个参数判断加载组件？

需要在constructor里面来接收xxx：props.location.query.isModal，路由传来的数据，然后再根据this.state.xx来判断条件

5.React-antd的form表单中

如果单独使用from而不是组件的话，@Form.create()，需要在这个类之前加上这个。否则getFieldDecorator这个属性用不了；这个是和弹出框一起用的

import { Form, DatePicker, Input } from "antd";
//时间转换的
import moment from 'moment';
//核心
@Form.create()
export default class structureList extends Component {
     handleModalRecordedOk=()=>{
       this.setState({
           ModalRecordedVisible:false,
       })
       this.props.form.validateFieldsAndScroll((err, values) => {
           if (!err) {
               let setDate=(moment(values.rzDate).format('YYYY-MM-DD'));//入账时间
               console.log(values)
           }
       })
   }
   handleModalRecordedCancel=()=>{
       this.setState({
           ModalRecordedVisible:false,
       })
   }

    render() {
         const { form: { getFieldDecorator } } = this.props;//记得加这个
         const {ModalRecordedVisible}=this.state
         return（
              <Modal
                   title="弹出框"
                   visible={ModalRecordedVisible}
                   onOk={this.handleModalRecordedOk}
                   onCancel={this.handleModalRecordedCancel}
               >
                   <Form.Item label="日期：" labelCol={{span: 7}} wrapperCol={{span: 15}}>
                       {getFieldDecorator('rzDate', {})(<DatePicker  format="YYYY-MM-DD"  />)}
                   </Form.Item>
                   <Form.Item label="xx：" labelCol={{span: 7}} wrapperCol={{span: 16}}>
                       {getFieldDecorator('kjpz', {})(
                           <Input  placeholder="请输入xxx" />
                       )}
                   </Form.Item>
             </Modal>
     ）
    }
}

6．React如果页面跳转后需要传个参数，然后另一个页面需要通过这个参数判断加载组件？

需要在constructor里面来接收props.location.query.isModal，路由传来的数据，然后再根据this.state.xx来判断条件

7.在react里面如果父传子this.props 传入某个数据的时候,这个数据一定要做非空或者length>0的判断 再加载子组件,首先写react一定要有拆分思想,特别是需要传参数的那种组件,能拆就拆,拆完了要进行传参判断

8.如何修改antd的内置样式

//首先你要给修改的组件样式写个名字
.modelTable{
  :global{
  //然后用global包裹起来,然后里面写组件的class名字,然后改样式
    .ant-table-tbody {
      color: #ABD0EE;
      font-size: 12px;
    }
}
//组件中
<Table  className={andTable.modelTable} />

9.怎么把antd中的table下面的分页给屏蔽了,官网有

<Table   pagination={false}// 不显示分页就直径渲染出来 />

10.怎么把antd中的table出现滚动条,官网有

//你可以根据Data到底满足多少来才出现滚动条
<Table   
 scroll={Data.length>=10?{y: 550}:false}
 />

11.如何通过点击事件来跳转路由和传参

  Back=()=>{
    const {history} = this.props;
   history.push({ pathname: "/home",query:{lx:"0"}})
  }

12.如果在antd的form中想要在输入文本的时候不能有空格，可以直接自动去重

options.getValueFromEvent 可以把 onChange 的参数（如 event）转化为控件的值

<Form.Item label="物具名称：" >
    {getFieldDecorator('furnitureName', {
       rules: [
            {required: true,message: '请输入物具名称'},
            { pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, "g") , message: '正则验证' }
        ],
        //核心代码
      getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),
    })(<Input  placeholder="请输入物具名称"/>)}
</Form.Item>

13.如何在antd的form中进行表单监听

这个方法硬是找了好久都不知道怎么搞
官网介绍
onFieldsChange 当 Form.Item 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store
onValuesChange 任一表单域的值发生改变时的回调
setFieldsValue 设置一组输入控件的值（注意：不要在 componentWillReceiveProps 内使用，否则会导致死循环，原因） |

直接上代码

export default Form.create({
    onValuesChange(props, changedValues, allValues) {
              //props----跟页面的const {xx}=this.props一样的意思，
              //changedValues---是表单中的哪一个item发生了改变
              //allValues----form中所有的字段；
            //实现实际情况，当价格和数量改变时，总价也变；
              //1.获取当前的price和pricenum
        let sum=null,price=allValues.price,pricenum=allValues.pricenum;
        if(!price){
            price=1;
        }
        if(!pricenum){
            pricenum=1;
        }
                //2.监听这两个item，做个判断，为了避免不必要的修改
        if(changedValues.pricenum || changedValues.price ){
            sum=price*pricenum;
                        //3.调用form中的设置方法，修改sumprice:sum
            props.form.setFieldsValue({sumprice:sum})
        }
    },
})(furnitureRegister);
//furnitureRegister就是当前的组件

14.如何在antd的form中select 如果没默认值为什么不显示placeholder问题

<Form.Item label="选择天气：" labelCol={{ span: 5 }} wrapperCol={{ span: 17 }} >
    {getFieldDecorator('repairResult', {
        rules: [
            { required: true, message: '请选择天气' }
        ],
              //这里默认值设为undefined即可
        initialValue:record.raStat ? record.raStat :undefined
    })(
        <Select  placeholder="请输入天气"  >
            <Option value="晴天">晴天</Option>
            <Option value="阴天">阴天</Option>
        </Select>
    )}
</Form.Item>

15.antd的表格带分页功能和一页显示多少条信息

  this.state={
          page:{
        pageNum:1,
        total:20
    },//分页
    pageSize:10,//一页显示
  }
  //选择分页方法
    onShowSizeChange =(current, pageSize) =>{
            //设置
        this.setState({
            pageSize:pageSize
        });
    };
    //点击页码
    changePage = (current) => {
        let data = Object.assign({}, this.state.page, { pageNum: current });
        this.setState({
            page: data
        })
    };
const paginationProps = {
    showTotal: () => `共${page.total}条`,//分页的条数
    pageSize: pageSize,//一页显示多少
    current:page.pageNum,//当前页面
    total: page.total,//总数
    onChange: (val) => this.changePage(val),//点击每页
    showSizeChanger:true,//是否启动选择一页显示多少条
    onShowSizeChange:(current, pageSize) => this.onShowSizeChange(current, pageSize)//方法
};

<Table
  rowKey={record => record.aiAiid}
  columns={columns}
  size="middle"
  loading={loading}
  pagination={ paginationProps }//这个就是分页的对象
  dataSource={dataSource}
  bordered
/>

image.png

16.react循环中加载不出静态的图片的问题

如果下面的方法不行,那就是webpack配置文件出了问题了

 constructor(props) {
        super(props);
        this.state = {
          //这里需要把路径用require导入进来，否则不行；打包后也没问题
            psdList:[
                {title:"模板1",srcImg:require("../../../public/psd/5030-1.png"),description:"50*30-1"},
                {title:"模板2",srcImg:require("../../../public/psd/5030-2.png"),description:"50*30-2"},
                {title:"模板3",srcImg:require("../../../public/psd/5030-3.png"),description:"50*30-3"}
            ]
        }
    }

         <div>
                {
                    psdList.map((item,index)=>{
                        return (
                            <Card
                                key={index}
                                hoverable
                                style={{ width: 240 }} 
                                cover={<img alt="加载中..." src={item.srcImg} />}
                            >
                                <Meta title={item.title} description={item.description} />
                            </Card>
                        )
                    })
                }
            
            </div>

17.antd中form多个表单元素相互验证,自定义校正validator

参考:https://blog.csdn.net/JudyC/article/details/103362312

<Form.Item label="取得日期：" >
    {getFieldDecorator('fiGeda', {
        rules: [
            { required: true, message: '请选择取得日期' },
            { validator: (rule, value, callback) => this.getDataChange(rule, value, callback) },
        ],
    })(<DatePicker format="YYYY-MM-DD" disabledDate={this.disabledEndDate} />)}
</Form.Item>
      //取得日期
    getDataChange = (rule, value, callback)  =>{
        const {form} = this.props;
        const {getFieldValue, validateFields} = form;
        const fiUsda = getFieldValue('fiUsda');//获取需要比较的字段的值,
        // 因为不是必填项, 所以value有值时才进行判断
        if(value != null && value !== ''){
            if(fiUsda != null && fiUsda !== '' ){
                if( fiUsda > value  ){
                    callback("取得日期必须大于投入使用日期")
                }
            }
        }
        callback()
    };

18.antd表格中如果需要做树形结构，然后还要做预加载，如果处理数据的问题

官网叙述（见下图）：
1.如果需要树形结构表格，那么只要数据有children即可
2.如果需要点击打开的话需要用到onExpand方法

image.png
image.png

思路：1.如果是树形结构，那么第一级别加载的就是最父级的也就是顶级的数据，所以先加载出来
2.点击当前条目只有父级，但是没子集，那么就是通过id去查询子集，然后赋值给点击的那个父级相同的id， item.children = res.result

表格中需要加一个方法：onExpand（expanded, record）---expanded=点击开关true，false，record=当前条目

          <Table
            rowKey={record => record.caAsid}
            columns={columns}
            onExpand={(expanded, record)=>this.handldOnExpand(expanded, record)}
            size="middle"
            loading={loading}
            pagination={ false }
            dataSource={dataSource}
        />

//下面是方法

    componentDidMount() {
      this.getTableData();
    }

  //获取第一级表格数据
    getTableFirst = async () =>{
        this.setState({
            loading: true
        });
        let res = await listService.selectAssetCodeOne();
        //console.log(res.result)
        this.setState({
            loading: false
        });
        if (res.statusCode !== 0) return message.info(res.message);
        this.setState({
            dataSource: res.result
        })
    };

    //展开开关，获取子集的数据
    handldOnExpand = async (expanded, record) => {
        const caAsid = record.caAsid
        const dataSource = this.state.dataSource
    
        if(!expanded)  return  //如果是关闭就返回
        if(record.children && record.children.length > 0)  return  //如果已经有数据就返回
        
        //这是接口，获取当前的id，查询子集中父级的id，一般都会有，比如行政区规划，做级联选择数据库肯定有父级的id
        let res = await listService.selectAssetCodeTwo(caAsid);
        if (res.statusCode !== 0) return message.info(res.message);

        const dataSet = (data) => {
            data.find((item) => {
              if (item.caAsid === caAsid) {
                //找到当前要展开的节点
                item.children = res.result
                return data
              }
              if (item.children && item.children.length > 0) {
                dataSet(item.children)
              }
            })
        }
        dataSet(dataSource || [])
        this.setState({
            dataSource
        })
        
    };

19.如果在表格中操控modal，并且需要修改或者编辑，那么你需要在关闭modal清除上次他填写的数据

只需要在modal中加入：destroyOnClose={true}即可

image.png

20.选择框弹出选择项如果滑动的页面的话，选择项的div会随之而动，只需要在上面加上

getPopupContainer={trigger => trigger.parentNode}即可；