React学习-一、基础界面调用
react

零、界面基础模版

import * as React from "react";
import {
    AutoComplete,
    DatePicker,
    Space,
    Cascader, //分级选择
    Select, //单选/多选
    Input,
    Button,
    Row,
    Col,
    Form,
    message,
} from "antd";
import { FormInstance } from "antd/lib/form";
const { Option } = Select;
import "./index.scss";
//网络请求
import axios from "axios";
import storeAttriService from "../../../services/storeAttri";
//数据保存
import { updateStoreInfo } from "../../../actions/storeActions";//更新缓存
import store from "../../../store";//读取缓存

//在主要html中调用的属性:需要配置
interface testState {
    test1: Array;
    test2: string;
    test3: number;
}

//主要html
class StoreAttribute extends React.Component {
    constructor(props: {}) {
        super(props);
    }

    state: testState = {
        test1:[],
        test2:'',
        test3:0
    };

    ////////////方法
    testMethod = (value: string) => {
        this.setState({
            test2: value,
        });
    };

    //生命周期
    componentDidMount = () => {

    };

    ////////////所有接口
    //1、接口(参数:currentCompanyOID)
    ReqBindCompanyJudge = async (value: string) => {
        return await storeAttriService
            .ReqBindCompanyJudge(value)
            .then((res) => {
                console.log('1、绑定接口:', res)
                if (res.status) {
                    return '1';
                }
                else {
                    return res.message;
                }
            })
            .finally(() => {
            });
    }

    //挂载
    render() {
        return (
            //外框



        );
    }
}

export default StoreAttribute;

一、react组件调用

ant design组件库:

详见https://ant.design/components/overview-cn/

需要注意很多组件用的是defalutValue,defalut类的属性,只有首次才会生效。

二、赋值方式

0、参数初始化:class内部使用的都需要interface


//在主要html中调用的属性:需要配置
interface testState {
    test1: Array;
    test2: string;
    test3: number;
}

//class中
state: testState = {
    test1:[],
    test2:'',
    test3:0
};

1、基本赋值:界面的值需要及时更新需要用到this.setState

//遍历的是map的赋值
this.setState({
  storeInfo: storeData.map((item: { fullName: string }) => {
    return {
      ...item,
      label: item.fullName,
      value: item.fullName,
    };
  }),
});

//遍历的是数组的赋值
this.setState({
  companyInfo: companyData.map((item: any[]) => {
    return {
      ...item,
      label: item[1],
      value: item[1],
    };
  }),
});

2、form表单赋值

//1、div写法
<Form ref={this.formRef} onFinish={this.onFinish}>
  <Form.Item label="诊断门店:" name="form__storeChoice" rules={[{ required: true, message: '请输入正确的门店地址' }]}>
  </Form.Item>
</Form>

2、在class方法里初始化
//form表单
formRef = React.createRef();

//3、表单重置所有值(form-item要设置不同的name)
this.formRef.current?.resetFields();

//4、表单赋值
this.formRef.current?.setFieldsValue({
  form__storeChoice: values.compName,
  form__storeDate: '',
  form__areacName: values.address,
  form__marketLv: String(values.marketLv),
  form__busNatureType: String(values.busNature),
  form__consumeLv: String(values.consumeLv),
  form__companyChoice: values.compGroupName,
})

三、接口和方法调用

//0、网络请求
import axios from "axios";
import storeAttriService from "../../../services/storeAttri";

//1、延迟接口传值方法
ReqBindCompanyJudge = async (value: string) => {
  console.log('查看企业码', value)
  return await storeAttriService
    .ReqBindCompanyJudge(value)
    .then((res) => {
      console.log('1、绑定接口:', res)
      if (res.status) {
        return '1';
      }
      else {
        console.log('return')
        return res.message;
      }
    })
    .finally(() => {
    });
}

//1、调用
var bindMsg = await this.ReqBindCompanyJudge(storeDic.oid)

//2、生命周期
componentDidMount = async () => {

};

shouldComponentUpdate = () => {

};

四、本地存储

0、基础封装(暂未关注)

1、调用本地存储文件

1、reducers-storeInfo
//引入头文件
import { Reducer } from 'redux';
import { StoreAction, STOREINFO, DEL_STOREINFO, STORE_QINGXI_STATUS, STORE_SELECTED } from '../actions/storeActions';
import { getCache, putCache, delCache } from '../utils/cache';

//定义StoreState,然后把storeInfo这些也interface一个
export interface StoreState {
  storeInfo: StoreInfo;
  isSave: boolean;
  storeStatus: Array,
  currentStore: CurrentStore
}

//设置初始值
const defaultState: StoreState = {
  storeInfo: getCache(STOREINFO) || null,
  isSave: getCache('isSave') || false,
  storeStatus: [0, 0, 0, 0],
  currentStore: {
    message: '',
    selected: false
  }
};

//输出值

export const storeInfoReducer: Reducer | any = (
  state = defaultState,
  action: StoreAction
) => {
  switch (action.type) {
    case STOREINFO:
      // console.log(action.userInfo)
      //jxs这里要改
      putCache({ key: 'storeInfo', value: action.storeInfo })
      return {
        ...state,
        isSave: putCache({ key: 'isSave', value: true }),
        storeInfo: putCache({ key: STOREINFO, value: action.storeInfo })
      }
    case DEL_STOREINFO:
      return {
        ...state,
        isSave: delCache('isSave', false),
        storeInfo: delCache(STOREINFO, null)
      }
    case STORE_QINGXI_STATUS:
      return {
        ...state,
        storeStatus: action.data
      }

    case STORE_SELECTED:
      return {
        ...state,
        currentStore: action.data
      }
    default:
      return state;
  }
};


import { Action, ActionCreator } from 'redux';
import { StoreInfo, CurrentStore } from '../reducers/storeInfo';


//更新
export const STOREINFO = 'STOREINFO';
//删除
export const DEL_STOREINFO = 'DEL_STOREINFO';
// 清洗状态
export const STORE_QINGXI_STATUS = 'STORE_QINGXI_STATUS';
// 
export const STORE_SELECTED = 'STORE_SELECTED';

export interface StoreQingXiStatusAction extends Action {
  type: 'STORE_QINGXI_STATUS';
  data: Array
}

export interface StoreSelectedAction extends Action {
  type: 'STORE_SELECTED',
  data: CurrentStore
}

export interface StoreInfoAction extends Action {
  type: 'STOREINFO' | 'DEL_STOREINFO';
  storeInfo?: StoreInfo
}


export const setStoreSelected: ActionCreator = (val: CurrentStore) => ({
  type: STORE_SELECTED,
  data: val
})

export const setStoreQingXiStatus: ActionCreator = (val: Array) => ({
  type: STORE_QINGXI_STATUS,
  data: val
})

export const updateStoreInfo: ActionCreator = (storeInfo: StoreInfo) => ({
  type: STOREINFO,
  storeInfo: storeInfo
});

export const delStoreInfo: ActionCreator = () => ({
  type: DEL_STOREINFO
});


export type StoreAction =  StoreInfoAction | StoreQingXiStatusAction | StoreSelectedAction;

2、具体使用

//0、引入头文件
//数据保存
import { updateStoreInfo } from "../../../actions/storeActions";//更新门店缓存
import store from "../../../store";//读取所有缓存

//1、保存信息
store.dispatch(
  updateStoreInfo({
  })
);

//2、读取信息
var userData = store.getState()?.user.userInfo




















暂无评论