react学习

Posted on |

setState异步执行

在实践的过程中发现一个奇怪的现象，我们如果先进行setState在进行网络请求，那么网络请求很可能提前进行，也就是setState是异步的，正确的同步写法为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onPageChange = (page) => {
       if(this.state.isSaleOrder){
           this.setState({
               sale_page:page,
           },() =>{//这要采用回调的方式，更新完state再继续进行网络请求，不然会造成异常情况
               this.getOrderManageList();
           });
       }else {
           this.setState({
               purchase_page:page,
           },() =>{
               this.getOrderManageList();
           });
       }
   }

div设置不可见

1
2
3
4
5
6
7
8
<div style={{display : this.state.reject}}>
  <Form layout="inline">
    <FormItem label="审核打回时间段筛选">
      <RangePicker placeholder={[ "开始时间", "结束时间"]} onChange={(data)=>{ this.state.rejectStartTime = data[0]; this.state.rejectEndTime = data[1] }} /></FormItem>
    <FormItem>
      <Button type="primary" onClick={()=>this.getAuditList()}> 筛选</Button></FormItem>
  </Form>
</div>

可以通过设置e不显示当前div，通过设置display:’block’显示当前div。

通过Form设置组件布局

1
2
3
4
5
6
7
8
9
10
<div style={{ marginTop: 24 }}>
  <Form layout="inline">
    <FormItem label="请选择业务类型:">
      <Select defaultValue="全部" style={{ width: 120 }} onChange={this.onChangeBusinessType}>
        <Option value="ALL">全部</Option>
        <Option value="COMMON_NEW_RETAIL">普通订单</Option>
        <Option value="CUSTOMIZED_CAR">定制车订单</Option></Select>
    </FormItem>
  </Form>
</div>

通过label:””设置左边的显示tab。

父组件调用子组件的方法

目的是通过父组件的事件去通知子组件的状态更新。父组件可以主动调用子组件的方法：

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
import React, {Component} from "react";
import { Button } from "antd";

//父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
　　　　　　　　　 <p>这是父组件</p>
                <Child triggerRef={this.bindRef} />
                <Button type="primary" onClick={this.btnClick} >click</Button>
            </div>
        )
    }

    bindRef = ref => { this.child = ref }

    btnClick = () => {
        this.child.getValuefromChild()
    }

}
//子组件
class Child extends Component {
    componentDidMount(){
        this.props.triggerRef(this)
    }
　　//这是子组件的方法
    getValuefromChild = () => console.log("this is child value.")

    render() {
        return <div>这是子组件</div>
    }
}

参考这种写法，可以通过this.child去掉用子组件的方法。原理以后再分析

子组件向父组件传递值

  • step 1: 在父组件引用子组件的属性上添加一个callback函数，会添加到子组件的props中。
  • step 2: 子组件在触发事件之后可以通过this.props.callback函数调用回调到父组件中引用子组件的callback方法。
  • step 3 父组件获取到子组件回调函数传来的值，进行相应的处理。