react学习---day03--refs的使用

2021-01-12 21:33:45 阅读：228 来源： 互联网

标签：input1 render -- refs value alert --- createRef ref

感觉与vue2.x的ref是一样的

1.首先使用字符串形式的ref

需求: 我需要两个input框一个是点击按钮时弹出输入值,一个是失去焦点时弹出输入值

 1 class App extends React.Component {
 2     showData1 = () => {
 3         // 为了this可以访问
 4         alert(this.refs.input1.value)
 5     }
 6     showData2 = () => {
 7         // 为了this可以访问
 8         alert(this.refs.input2.value)
 9     }
10     render() {
11         return (
12             <div>
13                 <input ref="input1" type="text" />
14                 <button onClick={this.showData1}>点击我</button>
15                 <input onBlur={this.showData2} ref="input2" type="text" />
16             </div>
17         )
18     }
19 }
20 ReactDOM.render(<App />, document.getElementById("app"))

react中建议不要使用字符类型的ref并提示在未来会删除字符类型的ref

2.回调形式的ref

 1 class App extends React.Component{
 2     showData1 = () => { // 回调形式的ref将元素作为参数传给了实例化
 3         alert(this.input1.value) // 在实例化中可以直接访问input1
 4     }
 5     showData2 = () => {
 6         alert(this.input2.value)
 7     }
 8     render() {
 9         return(
10             <div>
11                 <input ref={ c => this.input1 = c } type="text" />
12                 <button onClick={ this.showData1 }>点击我</button>
13                 <input onBlur={ this.showData2 } ref={ c => this.input2 = c } type="text" />
14             </div>
15         )
16     }
17 }
18 ReactDOM.render(<App />, document.getElementById('app'))

在使用回调形式的ref时一定要注意其this的指向到底是谁

代码中 c 代表的是currentNode,当前节点,如果将箭头函数展开就是:

(c) => {this.input1 = c}

只是将当前元素作为参数赋值给了实例化对象的input1

注意:内联形式的回调ref有一个小问题,因为是在render函数里面当视图发生更新的时候会先设置成null再将元素当做是参数进行调用

// 内联形式
<input ref={ c => this.input1 = c } type="text" />
showData1 = () => {
    alert(this.input1.value)
}

// class的绑定函数形式
bindValue1 = (c) => {
    this.input1 = c
}
<input ref={ this.bindValue1 } type="text" />

3.createRef()使用ref

 1 class App extends React.Component {
 2     // 创建一个createRef容器
 3     value1 = React.createRef()
 4     value2 = React.createRef()
 5     showData1 = () => {
 6         alert(this.value1.current.value)
 7     }
 8     showData2 = () => {
 9         alert(this.value2.current.value)
10     }
11     render() {
12         return (
13             <div>
14                 <input ref={this.value1} type="text" />
15                 <button onClick={this.showData1}>点击我</button>
16                 <input onBlur={this.showData2} ref={this.value2} type="text" />
17             </div>
18         )
19     }
20 }
21 ReactDOM.render(<App />, document.getElementById("app"))

需要注意的是

React.createRef()调用后会返回一个容器且这个容器只能储存一个元素(后面的会覆盖前面的)

在取ref值时current这个对象值是固定的 createRef()方法是react官方推崇的

标签：input1,render,--,refs,value,alert,---,createRef,ref
来源： https://www.cnblogs.com/M1NG/p/14267949.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react学习---day03--refs的使用