组件内的标签可以定义
ref
属性来标识自己
实例
需求:自定义组件,功能说明如下:
- 点击按钮,提示第一个输入框中的值。
- 当第 2 个输入框失去焦点时,提示这个输入框中的值。
常规做法
我们在使用常规 JS 时,如果想获得 DOM 对象,我们会给 html 标签加上 id
,并使用 getElementById
来获取 DOM 对象。
//展示左侧输入框的数据
showData = ()=>{
const input1 = document.getElementById('input1')
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const input2 = document.getElementById('input2')
alert(input2.value)
}
render(){
return (
<div>
<input id="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input id="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
使用 refs
在 React 中,封装了 refs
来完成获取 DOM 对象的功能。有如下三种方式:
- 字符串
- 回调函数
- createRef()
字符串形式
这种形式虽然很方便,但是使用次数多的话会有效率问题,所以 React 官方不建议使用,今后也有被弃用的可能。
//展示左侧输入框的数据
showData = ()=>{
const input1 = this.refs.input1
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const input2 = this.refs.input2
alert(input2.value)
}
render(){
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
回调函数
回调函数是使用比较多的方式。下面为内联函数的形式。
//展示左侧输入框的数据
showData = ()=>{
const input1 = this.input1
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const input2 = this.input2
alert(input2.value)
}
render(){
return (
<div>
<input ref={c => {this.input1 = c;}} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={c => {this.input2 = c;}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
当然也可以写成类内函数的形式。
//展示左侧输入框的数据
showData = ()=>{
const input1 = this.input1
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const input2 = this.input2
alert(input2.value)
}
getinput1 = (c) => {this.input1 = c}
getinput2 = (c) => {this.input2 = c}
render(){
return (
<div>
<input ref={this.getinput1} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={this.getinput2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
createRef()
这是 React 官方推荐使用的方式,但是每个 createRef()
只能对应一个 DOM 对象,所以如果需要多个 DOM 对象,则需要创建多个 createRef()
。
//展示左侧输入框的数据
showData = ()=>{
const input1 = this.myRef.current
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const input2 = this.myRef2.current
alert(input2.value)
}
// 创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
render(){
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
事件处理
- 通过
onXxx
属性指定事件处理函数(注意大小写)
1)React 使用的是自定义(合成)事件,而不是使用原生的 DOM 事件 —— 考虑兼容性。
2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) —— 为了高效。 - 通过
event.target
得到发生事件的 DOM 元素对象。React 官方提示不要过分使用refs
,在很多情况我们可以使用event.target
来代替refs
,比如上述实例中失去焦点提示信息的部分。
//展示右侧输入框的数据
showData2 = (event)=>{
alert(event.target.value);
}
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>