ant design pro react开发记录-白红宇

ant design pro react开发记录

阅读量：4165 次

发布时间：2019-05-26

本文共 1928 字，大约阅读时间需要 6 分钟。

react :

ant design pro：

1、建立新页面demo

import React, {
   useState} from 'react';export default class Demo extends React.Component {
     state = {
       loading: false, } getData() {
       this.setState(state => ({
         loading: true    }));    setTimeout(()=>{
         this.setState(state => ({
           loading: false      }));    }, 3000)  }// 页面加载完事件  componentDidMount() {
       this.getData();  }  render() {
       const btnQueryListData = () => {
         this.getData()    };       return( 		 
   
    			{
   this.state.loading}		 
   
	)}

2、数据修改

// 简单数据修改	 this.setState(state => ({
         loading: true    }));		// 修改对象数据	  const obj= {
   		 type: 1,		 total: 10	  }      this.setState(        Object.assign(this.state.objData, {
    ...obj}),        () => {
            // 回调函数，修改完这里操作其他操作        }      )

3、表单数据修改

//组件对象{
   	state = {
   		code: 0	}	// 表单定义ref	formRef = React.createRef()		     // input 修改数据    onchangeDeCode = (e)=>{
         this.setState(Object.assign(this.state.formInfo, {
    code: e.target.value }),() => {
   })    }	// 完成事件	goPathNcr() {
   }	// 页面加载完事件 	componentDidMount() {
     	  var data = 10  	  // 表单赋值   	  this.formRef.current.setFieldsValue({
            code: data,       })    } render() {
       return (      <>	 	
   
     this.goPathNcr() }	      >	        
    	          
     	        
    	        
    	          
     	        
    	      
   
	        )  }  }

5、路由跳转及接收参数

// 路由跳转  goPath() {
       this.props.history.push({
         pathname: "/sub",      query: {
           form: JSON.stringify(this.state.formInfo),      }    });  }// 在跳转页面接收参数const query = this.props.location.query.form

6、事件方法

需要一下写法，不然会在页面加载完就执行

// 或者、方法一resetChecked() {
     this.setState({
    selectedRowKeys: [] })}render() {
   	// 或者、方法二	 const resetChecked= () => {
          this.setState({
    selectedRowKeys: [] })    };	return (		<>			 			)}

后续记录中…………

转载地址：http://uixxi.baihongyu.com/

你可能感兴趣的文章