React 点击事件2

1. this.state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var LikeButton = React.createClass({
  getInitialState:function(){
    return {
      like:false
    };
  },
  handleClick: function(event) {
    alert(556);
    this.setState({
      like:!this.state.like
    });
    alert(this.state.like);
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        {this.state.like.toString()}
      </p>
      )
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

getInitialState 方法返回的是this.state，this.state 改变，DOM绑定的值也会变。

this.setState可以改变state的值。

2. this.refs.ref
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var HelloMessage = React.createClass({
    handleClick:function(){
        this.refs.myTextInput.focus();
        this.refs.myTextInput.value = "1234567";

    },
    render:function(){
        return	(
            <div>
                <input type="text" ref="myTextInput" />
                <input type="button" value="Focus the text input" onClick={this.handleClick} />
                </div>
        );
    }
});

ReactDOM.render(
    <HelloMessage name="join" />,
    document.getElementById("example")
)

给input加一个ref属性，方法中通过访问this.refs.ref名称来获取dom节点。

React 点击事件怎么传参

先看一下代码：

1
2
3
 React.Children.map(this.state.hours,function(item,index){
    return <li key={index} index={index} onClick={this.clickItem.bind(this,index)}>{item}</li>
}.bind(this))

map里的函数为什么要执行 bind(this)?

因为这个函数的this是指向window的，要把当前作用域传入，是this指向React的this。

onClick={this.clickItem(index)} 这样写会怎么样？

会在加载的时候执行。点击的时候并不执行。

如何才能正确的传入参数呢？

1
<li key={index} index={index} onClick={this.clickItem.bind(this,index)}>{item}</li>

把参数通过bind函数传进去。

React 路由

react-router-dom 的使用方法

  1. 先安装 react-router-dom
    在index.html 的目录下执行以下命令：

    1
    npm install react-router-dom -D

  2. 导出路由配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    import React from "react";
    import createBrowserHistory from 'history/createBrowserHistory'
    import {
      BrowserRouter as Router,
      Route,
      Link
    } from 'react-router-dom'

    const BasicExample = () => (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/topics">Topics</Link></li>
          </ul>

          <hr/>

          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About}/>
        </div>
      </Router>
    )

    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    )

    const About = () => (
      <div>
        <h2>About</h2>
      </div>
    )

    export default BasicExample

  3. 使用路由

    1
    2
    3
    4
    5
    6
    7
    8
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import BasicExample from "./router" 
    import registerServiceWorker from './registerServiceWorker';
    import Home from "./components/home"
    ReactDOM.render(<BasicExample />, document.getElementById('root'));
    registerServiceWorker();

React-router config 的用法

React有好几种路由嵌套的用法。感觉都不好用。终于我找到已一个React Router Config 的方法
官方例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React from 'react';
import ReactDom from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const Main = () => <h2>Main</h2>
const Sandwiches = () => <h2>Sandwiches</h2>

const Tacos = ({ routes }) => (
    <div>
        <h2>Tacos</h2>
        <ul>
            <li><Link to="/tacos/bus">Bus</Link></li>
            <li><Link to="/tacos/cart">Cart</Link></li>
        </ul>

        {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
        ))}
    </div>
)

const Bus = () => <h3>Bus</h3>
const Cart = () => <h3>Cart</h3>

const routes = [
    {
        path: '/sandwiches',
        component: Sandwiches
    },
    {
        path: '/tacos',
        component: Tacos,
        routes: [
            {
                path: '/tacos/bus',
                component: Bus
            },
            {
                path: '/tacos/cart',
                component: Cart
            }
        ]
    }
]

const RouteWithSubRoutes = (route) => (
    <Route path={route.path} render={props => (
        // pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes} />
    )} />
)

const RouteConfigExample = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/tacos">Tacos</Link></li>
                <li><Link to="/sandwiches">Sandwiches</Link></li>
            </ul>

            {routes.map((route, i) => (
                <RouteWithSubRoutes key={i} {...route} />
            ))}
        </div>
    </Router>
)

export default RouteConfigExample;

主要思想是：把配置的页面配置到一个叫 routes 的变量里。模式是 path和component 对应的。

RouteWithSubRoutes 的作用是循环遍历 routes 函数，将对应的组件渲染到对应的位置里。

React.children

React.children.map
使用方法：

1
2
3
React.Children.map(this.props.children, function (child) {
    return <li>{child}</li>;
})

其他方法

1
2
3
4

this.props.children.forEach(function (child) {
    return <li>{child}</li>
})

在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

React 里面如何使用jQuery 和 jQuery 的插件

如果直接 import $ from ‘./jquery.min’ 引入的话，会报错。
webpack 下使用jQuery ，要先安装。
在index.js 的目录下，执行以下命令：

1
npm install jquery -D

在js里引入jquery

1
import $ from 'jquery'

在webpack react项目里怎么使用jQuery的插件？

修改组建源码，将方法暴露出去。

1
2
3
4
5
6
7
8
9
function reflection($) {

	$.fn.reflect = function(options) {
		options = $.extend({
			height: 1/3,
			opacity: 0.5
		}, options);

		return this.unreflect().each(function() {

将方法暴露出去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	$.fn.unreflect = function() {
		return this.unbind("load").each(function() {
			var img = this, reflected = $(this).data("reflected"), wrapper;

			if (reflected !== undefined) {
				wrapper = img.parentNode;
				img.className = wrapper.className;
				img.style.cssText = reflected;
				$(img).data("reflected", null);
				wrapper.parentNode.replaceChild(img, wrapper);
			}
		});
	}

}

export default reflection;

在js中引用

1
2
3
4
5
6
import $ from 'jquery';
import cloud9carousel from './../js/jquery.cloud9carousel';
import reflection from './../js/jquery.reflection';
//初始化组件
cloud9carousel($);
reflection($);

TypeScript-变量、基本类型和运算符

基本类型

基本类型有boolean、number、string、array、void。所有类型在TypeScript中，都是一个唯一的顶层的Any Type 类型的自类型。any关键字代表这种类型。

类型 声明方式
boolean var isDone:boolean=false
number var height = 6;
string var name:string=”bob
array var list:number[]=[1,2,3]
enum enum Color {Red,Green,Blue}
any var notsure:any = 4;notsure = “maybe a string instaed”; notsure = false;

在TypeScript中，我们不能把null或undefind当作类型使用。

1
2
var testVar : null;//错误，类型错误
var testVar : undefined;//错误，找不到undefined

var、let和const

在TypeScript中，当声明一个变量时，可以使用var、let和const关键字

1
2
3
var mynum = 1;
let isValid:boolean = true;
const PI : number = 3.141592654;

联合类型

1
2
3
var path :string[]|string;
path  = '/temp/log.xml';
path = ['/temp/log.xml','/temp/error.xml'];

类型别名

TypeScript允许用type关键字声明类型别名

1
2
3
4
type PrimitiveArray = Array<string|number|boolean>;
type MyNumber = numbe;
type NgScope = ng.IScope;
type Callback = () => void;

函数

1.具名函数

1
2
3
4
5
6
7
function greet(name?:string):string{
 if(name){
  return "Hi," + name;
 }else{
  return "Hi!";
  }
}

2.匿名函数

1
2
3
4
5
6
7
var greet:(name?:string) => :string = function(name:string):string{
if(name){
  return "Hi," + name;
 }else{
  return "Hi!";
  }
}

类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Character{
  fullname:string;
  constructor(firstname:string,lastname:string){
    this.fullname = firstname + "  " + lastname;
  }

 greet(name?:string){
   if(name){
     return "Hi!" + name + "!my name is "  + this.fullnamel;
    }else{
     return "Hi! my name is " + this fullname ;
    }
  }
}
var spark = new Character("Jacob","Keyes");
var msg = spark.greet();//"Hi! my name is Jocob Keyes";
var msg1 = spark.greet("Dr. Halsey");//"Hi!Dr. Hasey! my name is Jacob Keyes"

VScode 设置 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "files.autoSave": "onWindowChange",
    "workbench.iconTheme": "material-icon-theme",
    "editor.tabSize": 4,
    "emmet.triggerExpansionOnTab": true,
    "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
    "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
    },
    "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
    },
    "files.associations": {
    "*.wxml": "wxml",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.wpy": "html",
    "*.vue": "vue"
    },
    "minapp-vscode.disableAutoConfig": true,
    "minapp-vscode.wxmlQuoteStyle": "'",
    "emmet.optimizeStylesheetParsing": false,
    "eslint.autoFixOnSave": true,
    "eslint.options": {
    "extensions": [
    ".js",
    ".vue"
    ]
    },
    "eslint.validate": [
    "javascript",{
    "language": "vue",
    "autoFix": true
    },"html","vue"
    ],
    "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
    },
    "window.zoomLevel": 0
}

css流布局

css可以利用 ==collumn-count== 属性实现瀑布流流布局
例子代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
	<meta charset="UTF-8">
	<title>瀑布流测试</title>
	<style>
		.water-fall{
			width: 1200px;
			height: auto;
			margin: 0 auto;
			column-count: 4;
			-webkit-column-count:4;

		}
		.water-fall .item{	
			box-sizing: border-box;
			border: #ccc 1px solid;
			padding: 5px;
			margin-top: 10px;
		}
		.water-fall .item:nth-child(4n+1){
			background-color: #4e0f0f;
		}
		.water-fall .item:nth-child(4n+2){
			background-color: #2cc468;
		}
		.water-fall .item:nth-child(4n+3){
			background-color: #c49c2c;
		}
		.water-fall .item:nth-child(4n){
			background-color: #c42cbf;
		}
	</style>
</head>
<body>
	<div class="water-fall">
		<div class="item">Lorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sit.</div>
		<div class="item">Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum, corrupti.</div>
		<div class="item">Voluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, dolore minima!</div>
		<div class="item">Amet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciunt recusandae!</div>
		<div class="item">Assumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimus.</div>
		<div class="item">Voluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optio?</div>
		<div class="item">Voluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniam.</div>
		<div class="item">Nihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibus.</div>
		<div class="item">Eveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquam sed.</div>
		<div class="item">Totam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobis.</div>
		<div class="item">Praesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cum?</div>
		<div class="item">Error odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt tempore.</div>
	</div>
</body>
</html>

只要在外面的div的属性里加上一个属性：collumn-count、-webkit-collumn-count，然后置顶一个值，是这一列显示的列数。

axios获取图片，后台返回文件流怎么处理

今天调一个返回图片的接口，图片是以文件流的格式返回的。

如何才能正确的显示图片呢？

1. 请求时在header设置返回类型。指定返回类型为 ==blob==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * 
 * @param {tai} string 生成订阅号海报
 */
static getSubscriptionPicture ({
  tai
}: {tai: string}) {
  return http.post({
    url: this.subscription,
    data: {},
    config: {
      requiresAuth: true,
      params: {
        tai
      },
      responseType: 'blob'
    }
  })
}

2. 使用原生js自带的 ==URL.createObjectURL== 函数。

1
this.card = URL.createObjectURL(res.data)
这样将==this.card==放在img的src上面就行了