ant design pro react开发记录

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( 
		 <div style={{padding: '20px', background: '#F0F2F5'}}>
			{this.state.loading}
		 </div>
	)
}

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 (
      <>
	 	<Form
	     	layout='inline'
	        ref={this.formRef}
	        initialValues={{ ...this.state.formInfo }}
	        onFinish={ () => this.goPathNcr() }
	      >
	        <Form.Item name="equipmentName" label="设备编码">
	          <Input onChange={this.onchangeDeCode}  placeholder="请输入"/>
	        </Form.Item>
	        <Form.Item>
	          <Button type="primary" htmlType="submit" loading={this.state.loading}>查询</Button>
	        </Form.Item>
	      </Form>
	    </>
    )
  }  

} 

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 (
		<>
			<Button size="small" onClick={() =>this.resetChecked()}>重置</Button>&nbsp;
		</>
	)
}

后续记录中…………