第2章：组件三大核心属性3: refs与事件处理
2024-09-15 本文已影响0人
让你变好的过程从来都不会很舒服
2****.4.2. 理解
组件内的标签可以定义ref属性来标识自己
2.4.3. 编码
- 字符串形式的ref
- 回调形式的ref
- createRef创建ref容器·
2.4.4. 事件处理
1.通过onXxx属性指定事件处理函数(注意大小写)
1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2.通过event.target得到发生事件的DOM元素对象
编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4_createRef.html</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babe1,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/* 此处一定要写babel */
// 创建组件
class Demo extends React.Component{
/**
* React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是专人专用的
*/
myRef=React.createRef();
myRef2 = React.createRef();
showData = ()=>{
alert(this.myRef.current.value);
}
showData2 = ()=>{
alert(this.myRef2.current.value);
}
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>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>
</body>
</html>
