reach to（react的refs属性）

refs

字符串形式refs-过时了 // ref key为自命名内容, value为节点 input class Demo extends React.Component { showData = () => { // 拿到的是真实DOM const { input1 } = this.refs; alert(input1.value); } showData2 = () => { const { input2 } = this.refs; alert(input2.value); } render() { return ( <div> <input ref="input1" type="text" placeholder="点击按钮提示数据" /> &nbsp; <button onClick={this.showData}>点我提示</button>&nbsp; <input onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦点提示" /> </div> ) } } 回调函数形式refs // 回调函数中c是当前节点,this.input1的Demo实例的属性 class Demo extends React.Component { showData = () => { // 拿到的是真实DOM const { input1 } = this; alert(input1.value); } showData2 = () => { const { input2 } = this; alert(input2.value); } // 直接调用 showInfo = (c) => { this.input2 = c; } render() { return ( <div> <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" /> &nbsp; <button onClick={this.showData}>点我提示</button>&nbsp; <input ref={this.showInfo} onBlur={this.showData2} type="text" placeholder="失去焦点提示" /> </div> ) } } createRef class Demo extends React.Component { // React.createRef 调用后可以返回一个容器,该容器可以存储被ref所表示的节点 // 即创建一个容器,将input节点放入容器中 // 一个容器存一个节点 myRef = React.createRef(); showData = () => { // 拿到的是真实DOM const value = this.myRef.current.value; alert(value); } render() { return ( <div> <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /> &nbsp; <button onClick={this.showData}>点我提示</button>&nbsp; </div> ) } }