react中的ref

ref

1.定义

用来操作普通DOM元素和子组件

2.操作普通DOM元素

• 方式一

{/* 方式一 */}
<div ref="div"></div>
 <button className="btn btn-primary" onClick={()=>this.send()}>操作DOM元素</button>
 send(){
        // console.log(this.refs.div);
        this.refs.div.style.width = '100px';
        this.refs.div.style.height = '100px';
        this.refs.div.style.background = 'pink';
    }

• 方式二

 {/* 方式二 */}
{/* 系统自动注入了一个参数: 该参数表示的是当前普通元素,*/}
<div ref={dom=>this.add=dom}></div>
<button className="btn btn-primary" onClick={()=>this.send()}>操作DOM元素</button>
send(){
        // 方式二:
        // console.log(this.add);
        this.add.innerHTML = '中原一点红';
        this.add.style.color = 'red';
}

• 方式三

 {/* 方式三 */}
<div ref={this.divRef}></div>
<button className="btn btn-primary" onClick={()=>this.send()}>操作DOM元素</button>
 send(){
        // 方式三
        // console.log(this.divRef.current);
        this.divRef.current.innerHTML = '王一博';
        this.divRef.current.style.background = 'green';
 }

3.操作子组件

<button className="btn btn-success" onClick={()=>this.change()}>通过ref属性操作子组件</button>
<Child ref={dom=>this.child=dom} />
  change(){
        // console.log(this.child);
        // console.log(this.child.state.name);
        this.child.message();
    }