关于react.js:react中refs和事件处理

react中refs和事件处理

1.开发环境 react
2.电脑系统 windows10专业版
3.在应用react开发的过程中,咱们可能会应用到 ref,上面是我联合 input做的一个分享,心愿对你有有所帮忙!
4.办法一:在 template中增加如下代码:

<input type="text" ref={input=>this.xx=input}></input>
<button onClick={this.huoqu}>获取</button>

//留神: this.xx.input //其中的 xx 相当于是一个变量,能够本人定义

5.增加 huoqu事件,代码如下:

huoqu(){
        console.log(this.xx.value);
    }

6.成果如下:


7.办法二:在template中增加如下代码:

<input type="text" ref="content"></input>
<button onClick={this.huoqu2}>获取2</button>

8.增加 huoqu2 事件,代码如下:

 huoqu2(){
        const input=this.refs.content;
        console.log(input.value);
    }

9.成果如下:

留神":尽管办法二,也能够获取到对应的数据,然而官网并不举荐应用办法二,然而办法二并没有被破除,官网举荐应用办法一

10.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!