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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!