react笔记

/** 监听路由变化 */

/** 监听路由变化 */
  history.listen((location, action) => {
    console.log('location:', location);
    console.log('action', action);
  });

  使用history对象来判断，当前页面是链接点进来的，还是从上一个页面按返回按钮回来的

 

import { history } from 'umi';
history.action == 'PUSH'    //链接点过来的
history.action == 'POP'   //返回键

想要使用该方法，必须使用umi的路由方式，即

history.push(地址)
或者
<Link to={地址}></Link>

注：刷新也会返回POP

 

routes 设置

  设置登录状态拦截，添加侧边栏

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router,Route,Switch,Redirect} from 'react-router-dom';//导入的方式跟之前有点变化

import {
    App,
    Home,
    TestCount,
    Login,
} from '../controls';

const islogin=false;
const RouterList = () => (
    <Router >  
          
        <Switch>                   
            <PrivateRoute exact path="/" component={Home}/>
            <LoginRoute exact path="/login" component={Login}/>
            <PrivateRoute exact path="/app" component={App}/>
            <PrivateRoute exact path="/home" component={Home}/>
            <PrivateRoute exact path="/home" component={Home}/>
            <PrivateRoute exact path="/testCount" component={TestCount}/>
            <Redirect to="/" />
            {/*<Route  component={App}/>*/}
        </Switch>            
    </Router>
)

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    islogin ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const LoginRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    islogin ? (
      <Redirect to={{
        pathname: '/',
        state: { from: props.location }
      }}/>
    ) : (
      <Component {...props}/>
    )
  )}/>
)
export default RouterList

 redux

 system与 reducers 中函数名一致

function mapStateToProps(state) {
  const { system } = state;
  return {
    system
  };
}

 

 react-quill富文本

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';


const modules = {
    toolbar: [  
        ['bold', 'italic', 'underline', 'strike'],        
        ['blockquote', 'code-block'],  

        [{ 'header': 1 }, { 'header': 2 }],               
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],  
        [{ 'script': 'sub'}, { 'script': 'super' }],      
        [{ 'indent': '-1'}, { 'indent': '+1' }],          
        [{ 'direction': 'rtl' }],                         

        [{ 'size': ['small', false, 'large', 'huge'] }],  
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  

        [{ 'color': [] }, { 'background': [] }],          
        [{ 'font': [] }],  
        [{ 'align': [] }],  
        ['link', 'image', 'video'],  
        ['clean']                                         
    ]         
}


<ReactQuill modules={modules} onChange={(val)=>this.setState({kngContent:val})} />         

 

按确定提交

if((e && e.keyCode==13) || e.type == "click"){ // enter 键
         
}

<input type="text" className="input username" id="username" name="username" placeholder="请输入用户名" onKeyUp={this.tocheck} onChange={(e)=>this.changes("login_name",e.currentTarget.value)}

 

antd 表单更新数据

this.props.form.setFieldsValue({
     password:"34455667"
 })

 

 

antd 表单自定义验证

{
                                  validator: (rule, value) => {
                                    if (!value || value == "") {
                                      return Promise.reject('请输入标签字段');
                                    }
                                    const rges = /^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
                                   
                                    if (!rges.exec(value)) {
                                      return Promise.reject('标签字段只能由数字、英文字母或者下划线组成');
                                    }
                                    return Promise.resolve();
                                  }
                                },

 

 {
                  validator: (rule, value) => {

                    if (value == 0) {
                      return Promise.reject('周课时不能为0');
                    }
                    return Promise.resolve();
                  }
                },

 

router 4 路由跳转

https://blog.csdn.net/u013910340/article/details/90181004

 

- [你知道吗？] 如果你需要使用 Tailwind CSS, max g tailwindcss 就可以一键完成配置，详见 https://umijs.org/docs/guides/generator#tailwind-css-配置生成器

 

 

export default connect((data: any) => ({
  [namespace]: data[namespace],
  loading: data?.loading.models[namespace] || false,
}))(Main);