react 类组件 传值传参

87 阅读1分钟

一、修改类组件之中的数据使用setState

93f1cc9c9ba5a20ad336766631c9c1c.jpg 二、组件中事件绑定传参方式

f1ed62f929a1a541fcf523878175c00.jpg 三、父传子 props

<CustomerSelect
    selectedCustomer={xxxx}
    CustomerSelect/>
    //接收
    ```
state = {
  //结构出来 直接使用
selectedCustomer: {
    ...this.props.selectedCustomer
},
}
  handleOk() {  方法
     const {selectedCustomer} = this.state;
   }

四、子传父
在父组件调用子组件的时候,传一个类型为函数的属性给子组件,然后在子组件调用这个函数类型的属性, 通过参数传递,就相当于调用父组件定义好的方法。。--》父传子 传方法过去

dc1981f70b5688c6bcbe045e1b9e7ab.jpg

41f344a1f05a7872c40619a40835776.jpg 五:ref绑定dom元素的使用

  1. 在React元素上绑定一个ref字符串
  2. 提前创建好ref对象,createRef(),将创建出来的对象绑定到元素
  3. 传入一个回调函数,在对应的元素被渲染之后,回调函数被执行,并且将元素传入
render() { return ( 
  <h2 ref={this.titleRef}>你会不会</h2>
)}
使用
constructor() { 
super() 
this.state = { } 
this.titleRef = createRef() 

console.log(this.titleRef.current)  //打印出不同属性 方法 用法
}

二回调用法
<input type="text" ref={(ref)=>{this.inputRef = ref}}>