一、字符串形式的 ref

<input type="text" /*给标签打上标记 ipt */ ref="ipt" />

拿到标记的节点，对其进行操作

handleClick = () => {console.log(this);// 用 ref 标记了的标签，都会保存在 refs 里面console.log(this.refs); // 获取 refsconsole.log(this.refs.ipt); // 获取 refs 里面的标记，返回标记所对应的标签console.log(this.refs.ipt.value); // 获取标记标签的值
}

二、回调函数形式的 ref

handleClick = () => {const {ipt} = this; // 结构出 this 上的 iptconsole.log(ipt);
}render() {return (<div><input type="text" ref = {c => this.ipt = c {/* 此时的 c 就是 input 元素本身 */}}/> {/* this.ipt 在实例上呈现 ipt: input */}<button onClick={this.handleClick}>按钮</button></div>)
}

三、createRef 形式

// 标记节点
myRef = React.createRef();
myRef2 = React.createRef();handleClick = () => {// this.myRef 是一个对象// this.myRef.current === input 元素本身console.log(this.myRef.current.value); // 拿到当前被标记的节点的值
}render() {return (<div><input type="text" ref={this.myRef} /><button onClick={this.handleClick}>按钮</button><input type="text" ref={this.myRef2} onBlur={this.handleBlur}/></div>)
}