Refs与事件处理
字符串形式的ref(官方开始不支持了)
//创建组件
class Demo extends React.Component{
showData = ()=>{
const { input1 } = this.refs;
alert( input1.value );
}
showData2 = ()=>{
const { input2 } = this.refs
alert( input2.value );
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button ref="buton100" onClick={this.showData}>点我提示数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )
回调函数形式的ref
//创建组件
class Demo extends React.Component{
showData = ()=>{
const { input1 } = this;
alert( input1.value );
}
showData2 = ()=>{
const { input2 } = this
alert( input2.value );
}
render(){
return(
<div>
<input ref={ (currentNode)=>{this.input1=currentNode} } type="text" placeholder="点击按钮提示数据"/>
<button ref= onClick={this.showData}>点我提示数据</button>
<input ref={ c=>this.input2=c } onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )
回调ref中回调执行次数的问题
//创建组件
class Demo extends React.Component{
state = {isHot:true}
showInfo = ()=>{
const {input1} = this;
alert(input1);
}
changeWeather = ()=>{
const {isHot} = this.state
this.setState({isHot:!isHot})
}
saveInput = (c)=>{
this.input1=currentNode;
console.log("@",c);
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
<input ref={ (currentNode)=>{this.input1=currentNode;console.log("@",c);} } type="text" />
//ref回调函数如果是以内联函数的方式定义的，在更新过程会被执行两次,第一次传入参数null，第二次传入参数DOM元素。
<input ref={ this.saveInput } type="text" />
//通过将ref的回调函数定义成class的绑定函数的方式可以避免上述问题。
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我提示输入的数据</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo />,document.getElementById('test') )
createRef容器
//创建组件
class Demo extends React.Component{
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是"专人专用"的。
*/
myRef = React.createRef()
myRef2 = React.createRef()
showData = ()=>{
console.log(this.myRef.current.value);
}
showData2 = ()=>{
console.log(this.myRef2.current.value);
}
render(){
return(
<div>
<input ref={ this.myRef } } type="text" placeholder="点击按钮提示数据"/>
<button ref= onClick={this.showData}>点我提示数据</button>
<input ref={ this.myRef2 } onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )
react中的事件处理
//创建组件
class Demo extends React.Component{
/*
(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件，而不是使用原生DOM事件 — 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) — 为了高效
(2).通过event.target得到发生事件的DOM元素对象
*/
//创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
showData = ()=>{
console.log(this.myRef.current.value);
}
showData2 = (event)=>{
console.log(event.target.value);
}
render(){
return(
<div>
<input ref={ this.myRef } type="text" placeholder="点击按钮提示数据"/>
<button ref= onClick={this.showData}>点我提示数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )
