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