React+antd3.0常用问题和小技巧（持续更新）

注：文章不断更新，遇到一个比较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}即可；

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350