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

后续记录中…………