字符串型ref
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串形式ref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component{
showToast1=()=>{
const {input1}=this.refs;
alert(input1.value)
}
showToast2=()=>{
const {input2}=this.refs;
alert(input2.value)
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮弹出"/>
<button onClick={this.showToast1}>点击按钮</button>
<input ref="input2" onBlur={this.showToast2} type="text" placeholder="失去焦点弹出"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
回调函数型ref
内联式的ref问题，回调函数会执行两次，第一次获取形参null,第二次获取形参node
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回调形式ref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component{
showToast1=()=>{
const {input1}=this;
alert(input1.value)
}
showToast2=()=>{
const {input2}=this;
alert(input2.value)
}
render(){
return(
<div>
<input ref={c=>this.input1=c} type="text" placeholder="点击按钮弹出"/>
<button onClick={this.showToast1}>点击按钮</button>
<input ref={c=>this.input2=c} onBlur={this.showToast2} type="text" placeholder="失去焦点弹出"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
class绑定函数型ref
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类绑定形式ref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component{
showToast1=()=>{
const {input1}=this;
alert(input1.value)
}
saveInput=(c)=>{
this.input1=c
}
render(){
return(
<div>
<input ref={this.saveInput} type="text" placeholder="点击按钮弹出"/>
<button onClick={this.showToast1}>点击按钮</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
React.createRef()型ref
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>createRef形式ref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component{
myRef1=React.createRef()
myRef2=React.createRef()
showToast1=()=>{
alert(this.myRef1.current.value)
}
showToast2=()=>{
alert(this.myRef2.current.value)
}
render(){
return(
<div>
<input ref={this.myRef1} type="text" placeholder="点击按钮弹出"/>
<button onClick={this.showToast1}>点击按钮</button>
<input ref={this.myRef2} onBlur={this.showToast2} type="text" placeholder="失去焦点弹出"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
- 事件源发生在该事件的元素上，可以通过event.target.value获取元素
- React事件通过事件委托的方式进行处理
- React修改原生DOM事件，使用自定义的合成事件。原生的onclick事件，修改为onClick事件
